JSX란?

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

• 문자열도 아니며, HTML도 아닌 위와 같은 문법 으로 JavaScript의 확장판( + HTML )이라고 생각하면 이해하기 편할 것이다.
• JS의 모든 기능을 사용할 수 있다.
• React의 element를 생성한다.

JSX 써보기.

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

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

• JS의 변수는 물론 HTML 문법을 모두 한 번에 작성할 수 있다.
• JS변수를 HTML 문법 내에서 {name} 과 같이 사용할 수 있다.

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;

• 위와 같은 방식으로 문자열 리터럴 JSX 속성을 정의할 수 있다.
• 중괄호를 속성 내에서 사용하여 JS 표현식을 삽입할 수도 있다.

경고

💡 JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용합니다.
예를 들어, JSX에서 class는 [className]이 되고 tabindex는 [tabIndex]가 됩니다.

JSX로 자식을 정의해보자.

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

• 태그가 비어있다면, 반드시 “ />”를 사용하여 바로 닫아주어야 합니다.

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

• 태그 내에서 자식 태그를 포함시킬 수 있습니다.