JSX

1. JSX란?

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

2. JSX에 표현식 포함하기

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

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

JSX안에 자바스크립트 표현을 중괄호로 묶어서 포함시킬 수 있다.

3. JSX 또한 표현식이다.

컴파일이 끝나면, JSX 표현식이 정규 자바스크립트 함수 호출이 되고 자바스크립트 객체로 인식된다.
이 말은 if 문이나 for 반복 내에서 JSX를 사용할 수 있으며, 변수에 할당하거나 매개 변수로 전달하거나 함수에서 반환할 수 있음을 의미한다.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

4. JSX 속성 정의

속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있다.

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

속성에 중괄호를 이용해 자바스크립트 표현식을 포함시킬 수 있다.

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

JSX는 HTML보다는 자바스크립트에 가깝기 때문에, React DOM은 HTML 속성 이름 대신 camelCase 속성 이름 컨벤션을 사용한다.
예를 들어, JSX에서 class는 className 이 되며, tabindex는 tabIndex 가 된다.

5. JSX 자식 정의

만약 태그가 비었다면, XML 처럼 />를 이용해 닫아주어야 한다.

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

JSX 태그는 자식을 가질 수 있다.

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

6. JSX 인젝션 공격 예방

유저 입력을 JSX 내에 포함시키는 것이 안전하다.

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

7. JSX 객체 표현

Babel은 JSX를 React.createElement() 호출로 컴파일한다.
아래 두 예제는 동일하다.

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

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

이 객체는 “React elements”라고 하며, 화면에서 볼 수 있는 내용에 대한 설명으로 생각할 수 있다. React는 이 객체를 읽어들이고 이를 사용하여 DOM을 구성하고 최신 상태로 유지한다.