React Fragment를 사용해야 하는 경우

나는 React로 무언가를 작성한 사람이 오류 Adjacent JSX elements must be wrapped in an enclosing tag를 받았을 것이라고 확신합니다. 간단히 말해서 React 구성 요소는 루트에 하나의 HTML 요소만 가질 수 있습니다. 따라서 동일한 구성 요소에 h2 태그와 p 태그를 표시하려면 무언가로 래핑해야 합니다. (내가 좋아하는 이유 중 하나Svelte는 구성 요소의 루트에 원하는 만큼 많은 요소를 넣을 수 있다는 것입니다.) 이 오류를 해결하기 위해 대부분의 사람들은 다음과 같이 합니다.

const MyComponent = () =>  {
  return (
    <div>
      <h2>Title</h2>
      <p>Some text.</p>
    </div>
  )
}

export default MyComponent

그러나 문제는 div 를 많이 사용하면 매우 복잡한 DOM 출력이 생성된다는 것입니다. 이 이미지는 Facebook 피드에 있는 한 게시물의 코드를 보여줍니다.



문제는 React에 이 문제를 해결하는 데 도움이 되는 구문이 내장되어 있다는 것입니다. 조각입니다: <> . div 또는 기타 HTML 태그 대신 사용할 수 있습니다. 따라서 위의 코드 예제는 다음과 같습니다.

const MyComponent = () =>  {
  return (
    <>
      <h2>Title</h2>
      <p>Some text.</p>
    </>
  )
}

export default MyComponent

그렇다면 프래그먼트는 언제 사용해야 할까요? 표시 목적으로 DOM 요소가 필요하지 않을 때마다 프래그먼트를 사용해야 합니다. DOM 요소를 사용해야 하는 유일한 경우는 스타일 지정 목적이나 의미론적 요구 사항(예: article 요소의 콘텐츠 래핑)을 위해 필요할 때입니다.

이것이 왜 중요한가요? 다시 렌더링할 때 렌더링하고 diff해야 하는 DOM이 적기 때문에 더 빠를 수 있습니다. 또한 flexbox 및 grid와 같은 최신 CSS 기능은 요소가 적을 때 훨씬 더 잘 작동합니다.