React Fragments

React를 이용해 컴포넌트를 만들고 JSX로 엘리먼트를 return해줄때 하나의 부모 엘리먼트로 감싸어지지 않으면 에러가 발생하는 경험을 겪은적이 있었다. 

function FuncName(props) {
    ...

    return <div></div>
    	   <div></div>;
}

이를 해결하기 위해서 원래 구조 계획에 있지 않던 엘리먼트를 생성하여 씌워주었지만 이 문제를 해결해주는 좋은 방법이 React에는 이미 있었다. 바로 이번 글에서 소개할 Fragments라는 문법이다.

 

Fragments

Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있다. 

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

위와 같은 코드가 있을때 Columns 컴포넌트에는 <td>만 들어가 있어야 자연스러운 형태라고 느낄것이다. 그러나 Fragments를 사용하지 않으면 아래 코드와 같이 작성해야 오류가 발생하지 않는다. 이렇게 할 경우 <tr></tr>사이에 <div>가 들어가 어색한 형태가 된다.

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

 

이번에는 Fragments를 사용한 코드를 확인해 보겠습니다.

class Columns extends React.Component {
  render() {
    return (
      <React.Fragments>
        <td>Hello</td>
        <td>World</td>
      </React.Fragments>
    );
  }
}

위와 같이 처리하면 더이상 <tr></tr>사이에 <div>가 들어가지 않아도 되고 2개의 <td> 엘리먼트만 들어가게된다.

 

Fragments를 선언하는 더 짧고 새로운 문법이 있습니다. 이는 엘리먼트에 태그가 없는것과 동일하다.

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

 

Fragments에 key가 있다면 <React.Fragment> 문법으로 명시적으로 선언해야 합니다. 예를 들어 정의 목록을 만들기 위해 컬렉션을 fragments 배열로 매핑하는 사용 사례입니다.

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>
  );
}