[React] Fragment

Fragment는 별도의 노드를 추가하지 않고 여러 태그를 그룹화 할 수 있는 요소이다. 

 

React는 JSX 문법을 사용하고, 두가지 이상의 태그는 무조건 하나의 태그로 감싸져야한다는 규칙이 있다. 

아래 예시처럼 두가지 이상의 태그가 들어가게 되면 에러가 발생하게 된다. 

 

❌ 잘못된 예

import React from 'react';
import Hello from './Hello';
import Bye from './Bye';

function App() {
  return (
    <Hello />
    <Bye />
  );
}

export default App;

 

그래서 이렇게 하나의 태그로 감싸줘야 한다. 

 

⭕ 바른 예

import React from 'react';
import Hello from './Hello';
import Bye from './Bye';

function App() {
  return (
  <div>
    <Hello />
    <Bye />
  </div>
  );
}

export default App;

 

하지만 단순히 감싸는 것을 위해 불필요한 div로 감싸는것이 좋지 않을때도 있다. CSS 설정시 복잡해질 수도 있고, div로 감싸기에 애매한 상황이 생길 수도 있다. 그럴때에 Fragment를 사용하면 된다.

Fragment는 브라우저상에서 별도의 엘리먼트로 나타나지 않는다. 

 

 

Fragment 사용

return (
    <React.Fragment>
        <Hello />
        <Bye />
    </React.Fragment>
);

// 또는 더 단축된 문법인

return (
    <>
        <Hello />
        <Bye />
    </>
);

 

만약 Fragment에 key 속성이 필요하다면 <React.Fragment> 문법으로 명시적으로 선언해 주어야 한다. 

React에서 map 메서드를 사용할때는 key 속성을 넣어주어야 경고가 발생하지 않기때문에 이런 상황에서는 명시적으로 적어주어야 한다. key는 Fragment에 전달할 수 있는 유일한 속성이다. 

 

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // React는 `key`가 없으면 key warning이 발생한다
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

 

 

React 공식문서 - Fragments