JSX

자바스크립트를 확장한 문법
React에서는 UI를 어떻게 표현해야 하는지를 설명하기 위해 React와 함께 사용할 것을 권장한다.
JSX를 사용하면 자바스크립트 코드 내에서도 HTML 코드처럼 UI를 바로 표현할 수 있기 때문에 UI 관련 작업을 할 때 좀 더 직관적이고 용이한 개발이 가능하다.
JSX는 표준 자바스크립트 문법이 아니기 때문에, 웹 브라우저는 JSX 코드를 그대로 이해하지 못한다.
JSX 코드는 웹 브라우저에서 실행되기 전 Babel과 같은 도구를 사용하여 표준 자바스크립트 문법으로 변환되어야 한다.
JSX 코드 예시

function App() {
  return (
    <div>
      <h1>h1 태그 내용</h1>
    </div>
  );
}

"use strict";

function App() {
  return React.createElement("div", null, React.createElement("h1", null, "Hello World!"));
}

HTML에서는 제대로 종료 태그를 사용하여 요소를 닫지 않아도 대부분 문제 없이 동작한다.
- 하지만 JSX에서는 반드시 요소를 닫아야만 오류가 발생하지 않는다.
만약 아래의 코드처럼 <h1>요소를 닫지 않고 JSX 코드를 저장하면,
실행 중인 React 애플리케이션은 아래와 같은 오류를 발생시키며 동작을 멈춘다.
<img>나 <br>요소와 같은 빈 요소(void elements)도 반드시 슬래시(/)를 사용하여
self-closing을 해 줘야만 오류가 발생하지 않는다.

export default function App() {
  return (
    <div>
      <h1>h1 태그 내용</h1>
    </div>
  );
}

컴포넌트(component)가 여러 개의 요소를 한 번에 반환할 수 있도록
React에서는 반드시 컴포넌트의 최상위 요소가 하나만 존재하도록 강제하고 있다.
아래 코드에서는 <h1>과 <p>요소 이렇게 2개의 최상위 요소가 존재하기 때문에, 오류가 발생한다.

export default function App() {
  return (
      <h1>h1 태그 내용</h1>
      <p>p 태그 내용</p>
  );
}

React v15까지는 주로 아래 코드처럼 <div>요소를 최상위 요소로 사용하여 나머지 요소들을 감싸주는 방식을 주로 사용하였다.
- 하지만 이러한 방식은 단순히 JSX 문법을 맞추기 위해서 불필요한 <div>요소를 추가해야만 하기에 권장할 만한 방법은 아니다.
React DOM에 의해 관리되는 모든 요소들은 최종적으로 id 속성값이 root인 <div>요소 안에 렌더링된다.
- 이 때의 <div>같은 노드를 루트 DOM 노드라고 부른다.

export default function App() {
  return (
    <div>
      <h1>h1 태그 내용</h1>
      <p>p 태그 내용</p>
    </div>
  );
}

export default function App() {
  return (
    <fragment>
      <h1>h1 태그 내용</h1>
      <p>p 태그 내용</p>
    </fragment>
  );
}

export default function App() {
  return (
    <>
      <h1>h1 태그 내용</h1>
      <p>p 태그 내용</p>
    </>
  );
}

export default function App() {
  const name = "홍길동";
  return <h1>Hello, {name}</h1>;
}

export default function App() {
  return (
    <>
      <h1>Hello, World!</h1>
      {
        //주석 내용
      }
      {/* 주석 내용 */}
    </>
  );
}