react fragment

이번 포스팅에서는 react의 Fragment에 대해 간단히 이야기하고자 합니다.

react fragment

React Fragment

ko.react.org에서는 react fragment를 다음과 같이 설명하고 있습니다.

React에서 컴포넌트가 여러 엘리먼트를 반환하는 것은 흔한 패턴입니다. Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있습니다.

React Fragment는 컴포넌트가 여러 엘리먼트를 반환해야 할 때 <div>등의 다른 태그로 감싸지 않고 엘리먼트를 반환합니다.

렌더링 시에도 반환된 그 여러 태그들은 <div> 따위로 감싸져 있지 않습니다.

Fragment를 적절히 사용하면 불필요한 <div> 태그를 제거할 수 있습니다.

또 table의 column 등을 추출하여 컴포넌트로 만들수 있습니다.

 

다음 코드는 Fragment 사용법 입니다.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

  

Fragment는 다음 코드와 같이 <>로 줄여서 사용할 수 있습니다.

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

 

그러나 Fragment가 key가 필요하다면(list의 자식으로 들어감), key를 props로 넘겨줄 수 있습니다.

key는 Framgment가 받을 수 있는 유일한 props입니다.

또, key를 넘겨준다면 단축 문법을 사용하지 말고 React.Fragment를 명시해야 합니다.

 

다음은 key를 받는 React 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>
  );
}

 

Fragments – React