왜 JSX는 반드시 하나의 요소로 감싸야할까?

JSX는 다음과 같이 쓰면 에러가 난다

	import ReactDOM from 'react-dom';

    ReactDOM.render(
      <p>안녕</p>
      <p>혜삐!</p>,
      document.getElementById('root')
    );

그렇지만 이렇게 쓰면 에러가 나지 않는다.

import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>
    <p>안녕</p>
    <p>리액트!</p>
  </div>,
  document.getElementById('root')
);

왜 그럴까? 🤔

도대체 왜 JSX는 반드시 하나의 요소로 감싸야할까?

그건 바로 JSX 문법으로 작성한 요소가 결과적으로 자바스크립트 객체가 되기 때문이다.

예를 들어서 아래의 코드는 다음과 같이 해석된다.

  import ReactDOM from 'react-dom';

  const element = <h1>Hello, Hyevvy!</h1>;
  console.log(element);
  ReactDOM.render(element, document.getElementById('root'));

{$$typeof: Symbol(react.element), type: "h1", key: null, ref: null, props: {…}, …}

이런 객체를 리액트 엘리먼트라고 하고, 이를 ReactDOM.render 함수에 전달하면 리액트가 객체 형태의 값을 해석하고 HTML 형태로 브라우저에 띄워주게 된다.

+ JSX를 안 쓰고도 리액트 엘리먼트를 만들 수 있을까?

=> 결론 : 가능하다

const element = createElement(type, props, ...children)

이런 식으로 리액트 엘리먼트를 직접 만들수도 있다. 프로퍼티들을 하나씩 살펴보자!

type : 태그 이름이나 컴포넌트
props : 객체이거나 null (빈 객체)
children : ReactNode가 들어갈 수 있고, optional