[React] Fragment

React는 Component 단위로 개발을 진행하게 됩니다. 이전에는 Class Component로 구현됐지만, 지금에 와서는 Function Component가 거의 대부분입니다.

 

이때, Component는 엘리먼트를 반환하게 되는데 조건이 생깁니다. 바로 하나의 Component에서는 하나의 엘리먼트만 반환해야 한다는 rule입니다.

 

보통은 아래와 같이 만들어져 사용됩니다만, 두 엘리먼트를 하나의 엘리먼트에 모아서 사용하는 경우도 있습니다.

function Example() {
  // ......
  return (
    <div>
      something
    </div>
  );
}

 

하지만 두 엘리먼트를 동시에 내보려고 하면 에러가 발생합니다.

function Total () {
  // ......
  return (
    // Error
    <Example/>
    <Example2/>
  );
}

 

이 문제를 해결하기 위해서 사용하는 게 Fragment입니다. Fragment를 통해 두 개 이상의 엘리먼트를 그룹화해 하나의 엘리먼트로 만들 수 있습니다. 또한 레이아웃이나 스타일의 변화도 없기 때문에 편하게 사용하면 됩니다. <Fragment></Fragment>로 사용할 수 있습니다.

function Total () {
  // ......
  return (
    <Fragment>
      <Example/>
      <Example2/>
    </Fragment>
  );
}

 

하지만 매번 Frament를 치는 것은 불편합니다. 그렇기에 더 간단한 방법으로 대체할 수 있습니다. 많이 보셨을 수 있을 <> </> 방법입니다. 위 코드와 같은 효과를 가집니다.

function Total () {
  // ......
  return (
    <>
      <Example/>
      <Example2/>
    </>
  );
}

 

그럼에도 <Fragment>가 있는 이유는 key를 사용하기 위함입니다. 아래와 같은 경우에 말입니다. 그렇지만 key를 사용하지 않는다면 단순하게 <></>를 사용하는 방법을 활용하면 좋습니다.

function Total () {
  // ......
  return arr.map((el) => 
    <Fragment key={el.id}>
      <Example/>
      <Example2/>
    </Fragment>
  );
}

 

또한 Fragment를 사용해서 감싸면 불필요한 태그를 줄일 수 있습니다.

 

참고

https://ko.react.dev/reference/react/Fragment