이 글은 React 공식 홈페이지 Docs 를 일부 번역한 글입니다.

JSX 소개

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

위의 구문은 스트링 타입도 아니고 HTML도 아닙니다. 자바스크립트에서 확장되어 나온 구문이다. 템플릿 언어처럼 보일 수 있으나 완전히 자바스크립트의 기능에 딸려 있는 것이다. JSX는 리액트의 “elements”를 생성한다.

왜 JSX를 사용하는가?

React에서 반드시 JSX를 써야하는 것은 아니지만, JSX를 사용하면 자바스크립트 코드 안의 UI를 다룰 때 가시적인 도움을 받을 수 있다. 또한 React가 더 유용한 error, warning 메세지를 보여주도록 한다.

JSX에 내장 표현들

아래의 예제에서, name이라는 변수를 선언하고 그 변수는 {}로 감싸서 JSX로서 사용할 수 있다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX에서 {} 안에서는 모든 유효한 자바스크립트 표현을 사용할 수 있다. 예를 들면, 2+2, user.firstName., formatName(user)등은 모두 유효한 자바스크립트 표현이다.

JSX의 명시적인 속성

특정한 문자열을 태그 내의 속성으로 사용하기도 한다:

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

또한 중괄호에 넣은 자바스크립트 표현을 사용하기도 한다:

const element = <img src={user.avatarUrl}></img>;

이렇게 두 가지 형태로 모두 사용할 수 있지만, 유의해야할 점은 !!!두 가지를 함께 사용하면 안된다는 점!!!이다.

JSX Represents Objects

다음의 두 예제는 같은 것 이다:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement()는 버그가 없는 코드를 작성할 수 있도록 몇 가지를 체크해준다. 가장 중요한것은 아래와 같은 객체를 생성해주는 것 이다.

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

이 객체가 바로 “React elements”이다. 화면에서 보고자 하는 것의 상세 설명이라고 할 수 있다. React는 이 객체들을 읽고, DOM을 생성하도록 해주고, 객체가 최신 상태를 유지하도록 해준다.