TIL 115. React.Fragment

Fragment

이 컴포넌트는 렌더링되는 결과에 아무런 추가적인 DOM 노드를 생성하지 않고, 여러 개의 자식 요소를 그룹화하는 역할을 한다.
기본적으로 빈 태그처럼 사용되며, <React.Fragment>나 축약된 형태인 <>로 작성할 수 있다.

React.Fragment를 사용하면 여러 개의 자식 요소를 감싸고 하나의 부모 요소로 그룹화할 수 있다.
이는 컴포넌트의 반환 값이 하나의 요소만 반환해야 하는 제약을 피할 수 있게 해준다.
예를 들어, 컴포넌트의 반환 값으로 <div> 요소로 감싸지 않고, 여러 개의 <li> 요소를 직접 반환하려고 할 때, <React.Fragment>를 사용하여 요소들을 그룹화할 수 있다.

import React from 'react';

function MyComponent() {
  return (
    <React.Fragment>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </React.Fragment>
  );
}

또는

import React from 'react';

function MyComponent() {
  return (
    <>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </>
  );
}

React.Fragment를 사용하면 부모 요소로 감싸는 태그가 추가되지 않기 때문에, DOM에 불필요한 노드가 생성되지 않아 효율적인 렌더링을 도와준다.
또한, React.Fragment는 키(key)나 속성(props)을 가질 수 있어 더 다양한 사용 방법을 제공한다.

---

<>(빈태그)와 Fragment의 차이

React.Fragment와 빈 태그(<>)를 사용하는 것은 기능적으로 동일하다.

키(key)와 속성(props) 지원

React.Fragment는 속성을 가질 수 있고, 각각의 Fragment에 고유한 키를 할당할 수 있다.
이는 컴포넌트의 재렌더링 성능을 최적화하는 데 도움이 될 수 있다.
반면에 빈 태그(<>)는 키나 속성을 지정할 수 없다.

가독성

React.Fragment를 사용하면 그룹화된 자식 요소의 시작과 끝을 명시적으로 표시할 수 있다.
반면에 빈 태그(<>)는 시작과 끝 태그가 없기 때문에 구분이 약간 어려울 수 있다.
코드의 가독성을 향상시키는 측면에서 React.Fragment를 사용하는 것이 더 명확할 수 있다.

기능의 범위

React.Fragment는 리액트 컴포넌트 안에서 사용되는 일반적인 그룹화 도구다.
반면에 빈 태그(<>)는 JSX의 문법적인 특성을 활용하여 그룹화를 수행한다.
이러한 측면에서 빈 태그(<>)는 React.Fragment보다 더 넓은 의미로 사용될 수 있다.

따라서, React.Fragment를 사용하면 명시적인 그룹화와 키/속성 지원의 장점을 얻을 수 있다.
빈 태그(<>)는 더 간결한 문법으로 그룹화를 수행할 수 있지만, 키/속성을 사용하지 못하고 시작과 끝을 명시적으로 표시하지 않아 가독성이 떨어질 수 있다.
선택은 개발자에게 달려있으며, 상황과 개인적인 선호도에 따라 사용 방식을 결정할 수 있다.