React Fragments

Goal

 - React Fragments란?

 - React Fragments를 사용하는 이유

 - React Fragments 사용시 주의할 점

React Fragments

: 리액트 프래그먼트는 다수의 엘리먼트를 반환하는 컴포넌트를 위한 패턴으로, DOM에 부가적인 노드의 추가 없이 children을 그룹핑 할 수 있게 해준다.

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

 

리엑트에서 컴포넌트가 반환하는 return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다. 이는 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문이다. 이러한 특성 때문에 DOM에 부담을 주지 않고 같은 계층의 엘리먼트를 감싸기 위해 React Fragments를 자주 사용한다.

React Fragments를 왜 사용할까? 

예시를 통해 확인해보자.

다음과 같이 ChildA, B, C를 리턴하는 컴포넌트는 Child 엘리먼트를 감싸는 최상위 태그가 없기 때문에 JSX expressions must have one parent element 라는 오류를 발생시킨다.

render() {
  return (
  // 최상위 태그로 감싸져 있지 않고 같은 계층의 엘리먼트를 return하고 있으므로 오류 발생
      <ChildA />
      <ChildB />
      <ChildC />
  );
}

이 때 React.Fragment 태그로 감싸주면 오류를 해결할 수 있고 DOM에 새로운 노드를 추가하지 않아도 된다.

render() {
  return (
  // div태그와 같이 불필요한 엘리먼트를 선언하지 않고 오류를 해결 할 수 있다.
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

React Fragments 사용시 주의할 점.

React.Fragment를 사용하기 위한 단축 문법도 있다. 하지만 단축 문법을 사용할 때는 각 엘리먼트에 key를 적용할 수 없기 때문에 사용을 지양하는게 좋다.

( https://stackoverflow.com/questions/59390955/can-i-add-a-key-prop-to-a-react-fragment )

class Columns extends React.Component {
  render() {
    return (
    // React.Fragment의 단축 문법, 사용이 간단하지만 key를 선언할 수 없다.
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}