💻 Fragments(feat. 리액트 공식문서)

waterglasses·2022년 11월 9일

React TIL fragment

TIL

목록 보기

45/50

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

Fragment

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

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

<React.Fragment>를 <> 단축 문법으로 사용할 수 있다.

동기

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

렌더링 된 HTML이 유효하려면 <Columns />가 여러 <td> 엘리먼트만 반환해야 한다. <Columns />
의 render() 안에 부모 div로 자식들을 감싼다면 렌더링 된 HTML은 유효하지 않는다.

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

이런 문제를 Fragments는 아래처럼 해결해준다.

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

단축 문법

빈 태그처럼 Fragments를 사용할 수도 있다.

key 또는 어트리뷰트를 지원하지 않는다는 것을 빼고 다른 엘리먼트처럼 <></>을 사용할 수 있다.****

key가 있는 Fragments

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