React : JSX

JSX 란?

리액트에서 컴포넌트를 작성할 때 사용하는, JavaScript 를 확장한 문법.

JSX 를 다룰 때 기억해야 할 것은, JSX 는 표현식이라는 것이다.

그래서 변수에 할당하고, 인자로 받아들이고, 함수로 반환하고, 표현식을 포함할 수 있다.

 

변수에 할당하기

가장 기본적인 형태이다.

const element = <h1>Hello, world!</h1>;

그 자체로 표현식이기 때문에 당연히 변수에 할당해서 사용할 수 있다.

이렇게 작성한 JSX 는 React "Element" 를 생성한다.

 

표현식 포함하기

JSX 는 JavaScript 표현식을 포함할 수 있다.

const name = 'react';
const element = <div>hello {name}!</div>;
const element2 = <div>hello {userFunc(name)}!</div>;
const element3 = <div>hello {2+2}!</div>;

위의 예시처럼, JavaScript 의 유효한 모든 표현식을 {} (중괄호) 감싸서 사용할 수 있다.

 

 

또한, 속성에 따옴표를 이용하여 문자열 리터럴을 정의할 수 있다.

const element = <div userIndex="0"></div>;

 

단, 위의 두 방식을 섞어서 쓰지 않도록 주의해야 한다.

(가령, 중괄호 주변에 따옴표를 입력하는 것은 금지된다.)

즉 중괄호 (표현식에 사용) 과 따옴표 (문자열 값에 사용) 를 동일한 어트리뷰트에 동시에 사용하면 안되고, 하나만 사용해야 한다.

 

몇 가지 중요한 규칙

JSX 는 얼핏 보기에는 html 같지만, JavaScript 이다.

HTML 과 비슷한 문법으로 작성하면 이를 내부적으로 Javascript 형태로 변환시켜준다. 변환을 위해 지켜야 할 중요한 규칙이 있는데,

• 태그는 꼭 닫혀있어야 한다. (br 태그 등 주의)
• 두 개 이상의 Element 는 무조건 하나의 Element 로 감싸져있어야 한다.
  (단순히 이를 위해 div 를 쓰기 원하지 않는다면 Fragment 로 감싸주자. 단, 16.2 부터 도입된 Fragment 기능!)

<div> //<Fragment>
  <div>
  Hello
  </div>
  <div>
  Bye
  </div>
</div> //</Fragment>

 

또한, JSX 는 HTML 보다 JavaScript 에 가까우니, camelCase 프로퍼티 명명 규칙을 사용한다.

HTML 에서는 onclick 로 작성하던 것을 onClick 로 작성해야지 오류가 나지 않는다.

 

권장 사항

• 가독성을 위해 줄 바꿈
• 자동 세미콜론 삽입 방지를 위해 괄호로 묶기

const element = (
  <h1>
    Hello, {userFunc(name)}!
  </h1>
);

 

---

Ref.

React 공식 문서 ko.reactjs.org/docs/introducing-jsx.html

.