1 - 04. 멀티 Element 생성하기

패스트캠퍼스 '한 번에 끝내는 React의 모든 것' 수강 후 정리.

멀티 Element 생성

<div id="root">
  <h1>Hi</h1>
  <h3>Bye</h3>
  <h5>Children</h5>
</div>

이전까지 하나의 리액트 엘리먼트만 루트 엘리먼트에 삽입한 것과 다르게, 실제 Html 구조는 수 많은 노드로 구성되어 있다. 그렇다면 리액트를 사용하여 위와 같이 여러 엘리먼트를 넣으려면 어떻게 해야할까.

하나의 태그에 담기

<script type="text/babel">
  const $root = document.getElementById("root");
  const $element = (
    <div
      className="container"
      children={[
        React.createElement("h1", null, "Hi"),
        React.createElement("h3", null, "Bye"),
        React.createElement("h5", null, "Children")
      ]}
    />
  );

  ReactDOM.render($element, $root);
</script>

일종의 컨테이너 역할을 해줄 div태그를 하나 생성한 뒤, children 속성에 각각의 엘리먼트를 생성하여 넘겨주었다. 이와 같은 방법을 사용하면 표시되는건 목표와 같지만, 실제 DOM 구조는 다르게 나타난다.

왼쪽의 원래 목표와 다르게 3개의 엘리먼트를 담아주기 위해 생성한 div.container가 같이 렌더링 된 모습이다. ReactDOM.render 함수는 첫 번째 인자로 단일 엘리먼트를 받아야 하는데, 그럼 어떻게 3개의 엘리먼트를 바로 루트 엘리먼트에 렌더링할 수 있을까.

React.fragment

<script type="text/babel">
  const $root = document.getElementById("root");
  const $h1 = <h1>Hi</h1>;
  const $h3 = <h3>Bye</h3>;
  const $h5 = <h5>Children</h5>;
  const $container = (
    <>
      {$h1}
      {$h3}
      {$h5}
    </>
  );
  ReactDOM.render($container, $root);
</script>

React에서는 이런 고민을 해결하기 위해 React.Fragment라는 문법을 제공한다.
이것을 사용하면 DOM에 별도의 노드(위에서의 div.container)를 추가하지 않고 자식을 그룹화 할 수 있다.
<> ... </>는 <React.Fragment />의 단축 문법이며, 동일한 결과를 반환하지만 만약 Key 또는 어트리뷰트를 설정하고자 한다면 단축 문법이 아닌 명시적으로 선언해주어야 한다.