React-Fragment

요소 여러개가 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 오류가 발생하였다.

React가 컴포넌트를 변경시키는 원리

React Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 바뀐 사항과 변하지 않은 사항을 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있다.

그러한 이유로

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <h2>React!</h2>
    </div>
  );
}

export default App;

div태그로 감싸주어야 한다. 그런데 꼭 div 태그를 사용해야될까? 그것은 아니다.

Fragment

import {Fragment} from 'react'

리액트 v16이상부터 도입된 Fragment 기능을 사용하면 된다.

import {Fragment} from 'react'

function App() {
  return (
    <Fragment>
      <h1>Hello</h1>
      <h2>React!</h2>
    </Fragment>
  );

Fragment는 다음과 같은 형태로도 표현할 수 있다.

import {Fragment} from 'react'

function App() {
  return (
    <>
      <h1>Hello</h1>
      <h2>React!</h2>
    </>
  );

훨씬 간단하고 브라우저에서도 잘 출력된다!