React hooks JSX란? 리액트 훅 JSX란?

React hooks JSX란? 리액트 훅 JSX란?

 

 우리는 저번 시간 useState와 useEffect를 배웠고 그 사이 짧게

JSX에 관해 언급했습니다.

JSX란 아래와 같이 HTML의 형태를 띠고 있습니다.

<div>
  <p>hello</p>
</div>

하지만 엄밀히 말하자면 이건 HTML이 아닙니다!

엄연한 자바스크립트 문법이죠!!

오늘도 어김없이 전혀 비전문적이고 쉽게 알아보겠습니다.

 

목차 

1. JSX의 법칙.
2. JSX의 사용법.
3. 컴포넌트를 사용할 때는?
4. 마치며.

1. JSX의 법칙.

 

 사실 딱히 법칙이라고 할만한 것도 없는데, 법칙이라 정하니 민망합니다.

하지만 여전히 몇 가지 지켜주어야 하는 것들이 있습니다.

같이 알아보겠습니다.

 

-  파일 안에 JSX에서 최상위에 위치한  Tag는 꼭 하나여야 합니다.

무슨 말일 까요? 기본적인 리액트 코드를 보시죠.

import React from 'react';

const RuleOfJSX = () => {
    return (
        <div>
            <p>hello</p>
            <p>nice to meet you</p>
        </div>
      );
}

export default RuleOfJSX;

import React from 'react';

const RuleOfJSX = () => {
    return (
        <div>
            <p>hello</p>
        </div>
        <div>
            <p>nice to meet you</p>
        </div>
      );
}

export default RuleOfJSX;

 

처음 코드와 두 번째 코드를 살표 보도록 합시다.

처음 코드는 최상위의 divtag 하나가 존재하고 그 안에 두 개의 ptag들이 존재합니다.

두 번째 코드는 최상위의 divtag 두 개 존재하고 그 안에 각자의 ptag들이 존재합니다.

결론부터 말씀드리자면 두번째 코드는 잘못된 코드입니다.

항상 최상위 즉 부모 태그는 하나여야 합니다. 두 개 세 개가 아닌 단 하나 말이죠.

그렇다면 두 번째 코드와 같이 사용하려면 어떻게 해야 할까요??

간단합니다. 2개의 div에 다시 한번 최상위의 태그를 지정해주면 됩니다.

이렇게 말입니다.

 

import React from 'react';

const RuleOfJSX = () => {
    return (
        <div>
            <div>
                <p>hello</p>
            </div>
            <div>
                <p>nice to meet you</p>
            </div>
        </div>
      );
}

export default RuleOfJSX;

여기서 팁이 있습니다.

위의 코드와 같이 불필요하게 div로 다시 감싸기 싫으시다면, 이렇게도 가능합니다.

 

import React from 'react';

const RuleOfJSX = () => {
    return (
        <>
            <div>
                <p>hello</p>
            </div>
            <div>
                <p>nice to meet you</p>
            </div>
        </>
      );
}

export default RuleOfJSX;

이렇게 아무런 태그의 이름 없이 꺽새괄호만 사용한다면,

새로운 태그를 생성하는 것이 아닌 감싸기만 해 줍니다.

그리고 아무 문제없이 잘 작동합니다.

 

또한 여느HTML태그와 같이 Self-closing tag도 가능합니다.

아래의 코드와 같이 말이죠.

 

import React from 'react';

const RuleOfJSX = () => {
    return (
        <div>
            <input />
        </div>
      );
}

export default RuleOfJSX;

이것이 간단한 JSX의 법칙입니다.

추가적인 게 있다면 후에 보충하겠습니다.

 

2. JSX의 사용법.

 

JSX는 HTML이 아닌 Javascript 문법이기 때문에,

변수로 지정할 수 있습니다. 이렇게 말입니다.

import React from 'react';

const RuleOfJSX = () => {
     const name = (
        <div>
          <p>hello my name is Mike</p>
        </div>
      );


    return (
        <div>
          {name}
        </div>
      );
}

export default RuleOfJSX;

name이라는 변수를 JSX의 코드로 초기화했습니다.

이 변수를 아래의 return내부의 JSX에 사용하기 위해서,

중괄호를 이용해줍니다.

태그 사이에 중괄호를 사용한다는 것은 변수, 조건문, 반복문

혹은 함수를 사용하겠다는 뜻입니다.

 

또한 우리가 임의로 태그의 이름을 지정할 수 있습니다.

그 부분은 다음 3장에서 보도록 하겠습니다.

 

3. 컴포넌트를 사용할 때?

 

리액트의 큰 특징은 모든 요소들을

컴포넌트로 분할할 수 있다는 것입니다.

즉 이리저리 마구 조립이 가능하다는 뜻입니다.

조립이 가능하려면 다른 요소를 담고 있는 리액트 파일을

Import 하여 사용 가능합니다.

예를 보시겠습니다.

// Input component.

import React from 'react';

const Input = () => {
	return(
        <div>
            <input />
        </div>
    )
}

export default Input;

// Loginpage

import React from 'react';
import Input from './input';

const Loginpage = () => {
	return(
    	<div>
            <Input />
        </div>
    );
}

첫 번째 Input 파일은 inputtag를 포함합니다.

두 번째 Loginpage 파일은 Input 파일의 inputtag을 가져와 보여주고 싶습니다.

그렇다면 Loginpage 파일에 Input 파일을 import 해줍니다.

이때 지정할 이름은 항상 대문자로 시작해야 합니다.

(그렇지 않으면 에러를 발생시킵니다.)

저 Input은 다른 이름으로 항상 변경 가능합니다!

하지만 역시나 대문자로 시작해야 합니다.

이렇게 작은 요소들을 컴포넌트로 나누어 관리하면,

저 Input 파일은 Loginpage를 포함해 다른 페이지를 위해서

재활용이 가능해집니다. 이것이 리액트의 장점 중 하나라 할 수 있습니다.

재활용 비율을 늘리고, 부분적인 업데이트를 가능하게 합니다.

 

4. 마치며.

 

 다시 한번 쉽게 요약해 드리겠습니다.

 

1. JSX는 HTML이 아니다. 자바스크립트 문법이다.

2. 파일 당 JSX는 항상 하나의 부모 태그를 가져야 한다.

최상단에 2개 이상의 태그가 존재할 시 에러를 유발한다.

3. JSX는 "<></>"처럼 태그 안에 이름을 지정하지 않은 태그를 사용 가능하다.

이는 divtag 대신 많이 사용 가능하며, 자식 tag들을 감쌀 뿐

자체로 아무런 태그도 생성시키지 않는다.

4. JSX는 자바스크립트 문법이기에 변수로 할당 가능하다.

5. JSX안에 변수, 조건, 반복문 그리고 함수 등을 사용하려면 중괄호를 이용해야 한다.

6. Element들을 컴포넌트로 작게 나누어 JSX 안에 import 가능하다.

이로써 부분적인 업데이트와 재활용비율을 늘일 수 있고, 코드도 짧아진다.

 

이렇게 오늘은 짧고 쉽게 JSX를 알아보았습니다.

JSX는 리액트를 위해서 꼭 꼭 무조건 필요합니다.

사실 HTML과 비슷하거나 거의 동일하기에 익숙해지기 쉽습니다.

또한 실제 리액트로 작업하시다 보면

얼마나 효율적이고 좋은지 알게 되실 겁니다.

 

시간이 하루가 다르게 빠르게 지나가는 것 같습니다.

처음 독일에 왔을 때 어학원 다닌다고 이리저리 돌아다니고,

구경하고 경험하고 1년 2년이라는 시간은 참 빨리도 가더군요.

여러분의 1년은 어떠셨나요?

지난 1년에 이루 시진 못한 목표나 계획을 이번 연도에는 

좋은 성과를 이루실 수 있게 항상 응원하겠습니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.