[ React ] React Fragment 란

React Fragment 란

React 에서는 여러개의 컴포넌트를 렌더링 할 때, 하나의 부모 컴포넌트로 감싸야 합니다. 하지만, 이런 부모 컴포넌트는 불필요한 DOM 요소를 추가하게 됩니다. 이런 경우에 사용하는 것이 React.Fragment 입니다.

import React from "react";

const App = () => {
  return (
    <React.Fragment>
      <div>안녕하세요</div>
      <div>리액트</div>
    </React.Fragment>
  );
};

export default App;

또는 다음과 같이 React.Framgment 를 생략하고 사용할 수 있습니다.

import React from "react";

const App = () => {
  return (
    <>
      <div>안녕하세요</div>
      <div>리액트</div>
    </>
  );
};

export default App;

이렇게 사용하면, 불필요한 DOM 요소를 추가하지 않고 여러개의 컴포넌트를 렌더링 할 수 있습니다.

또, React.Fragment 는 key 를 props 로 전달받을 수 있습니다.

function App() {
  return (
    <>
      {props.data.map((item) => (
        <React.Fragment key={item.id}>
          <div>{item.name}</div>
          <div>{item.age}</div>
        </React.Fragment>
      ))}
    </>
  );
}

map 함수를 사용하여 배열을 렌더링 할 때, key 를 설정해야 하는데, 이때 React.Fragment 를 사용하면 key 를 설정할 수 있습니다.