React에서 React.Fragment를 사용하는 이유

React 컴포넌트를 작성하다 보면 JSX에서 최상위 요소를 하나만 리턴해야 하는 규칙을 마주하게 됩니다.

이 규칙은 React의 가상 DOM과 연관이 있으며, 효율적인 렌더링과 성능 최적화를 위해 중요합니다.

이 글에서는 React.Fragment와 그 축약형인 빈 태그 (<> </>)를 사용하는 이유와 동작 방식을 설명합니다.

React에서 최상위 요소 하나만 리턴하는 이유

React는 가상 DOM (Virtual DOM)을 사용하여 렌더링 성능을 최적화합니다.

컴포넌트가 업데이트될 때마다 React는 가상 DOM에서 변경 사항을 확인하고, 최소한의 변경만 실제 DOM에 반영합니다.

이를 Reconciliation (조정) 과정이라고 부르며, React의 핵심 동작 방식 중 하나입니다.

이때 가상 DOM을 효율적으로 비교하기 위해, 컴포넌트는 하나의 최상위 요소를 리턴해야 합니다.

만약 여러 개의 최상위 요소가 리턴된다면, React는 각 요소의 관계와 구조를 별도로 추적해야 하므로 성능이 저하될 수 있습니다.

React.Fragment와 빈 태그 (<> </>)의 역할

React는 여러 요소를 하나의 최상위 요소로 감싸지 않고도 반환할 수 있도록 React.Fragment를 제공합니다. React.Fragment는 불필요한 부모 DOM 요소를 추가하지 않고 여러 자식 요소를 그룹화할 수 있는 역할을 합니다.

DOM 구조가 불필요하게 깊어지는 것을 방지하여 렌더링 성능을 최적화하고, 더욱 간결한 코드 작성을 돕습니다.

빈 태그 (<> </>)는 React.Fragment의 축약형으로, 가독성을 높이고 코드 길이를 줄이는 데 유용합니다.

 

	빈 태그 (<> )	React.Fragment
Key 속성 사용	불가능	가능
코드 간결성	매우 간결	덜 간결
TypeScript 호환성	제한적	좋음

 

예시: React.Fragment와 빈 태그 (<> </>) 사용

// React.Fragment 사용 예시
return (
  <React.Fragment>
    <div>첫 번째 요소</div>
    <div>두 번째 요소</div>
  </React.Fragment>
);

// 빈 태그 사용 예시
return (
  <>
    <div>첫 번째 요소</div>
    <div>두 번째 요소</div>
  </>
);

 

위 예시에서 React.Fragment와 빈 태그를 사용함으로써, 불필요한 DOM 요소 없이 두 개 이상의 요소를 반환할 수 있습니다.

리렌더링 최적화와 성능 향상

React는 상태나 props가 변경될 때마다 컴포넌트를 리렌더링합니다.

여러 개의 최상위 요소가 있는 경우,

React는 각 요소를 개별적으로 추적하고 업데이트해야 하므로 불필요한 리렌더링이 발생할 가능성이 큽니다.

React.Fragment와 빈 태그를 사용하면

React가 DOM 트리를 효율적으로 구성하고,

불필요한 업데이트를 줄여 렌더링 성능을 최적화할 수 있습니다.

특히, 배열로 자식 요소를 반환할 때도 React.Fragment와 빈 태그를 통해 DOM 트리의 깊이를 줄일 수 있어 효율적입니다.

Key와 Fragment 사용

React의 Key 속성은 각 컴포넌트나 요소의 순서를 추적하여 재사용성을 높이고, 변경 사항을 빠르게 감지하는 데 도움을 줍니다. React.Fragment에 key를 지정하면 DOM 구조를 바꾸지 않으면서,

개별 요소들의 순서를 보다 효율적으로 관리할 수 있습니다.

// Fragment에 key를 사용하는 예시
const items = ['Item1', 'Item2', 'Item3'];

return (
  <>
    {items.map((item, index) => (
      <React.Fragment key={index}>
        <div>{item}</div>
      </React.Fragment>
    ))}
  </>
);

 

이렇게 key와 React.Fragment를 결합하여,

React는 DOM 트리에서 불필요한 요소 추가 없이 각 요소를 추적하고, 업데이트 효율을 높일 수 있습니다.

결론

React에서 React.Fragment와 빈 태그 (<> </>)를 사용하는 이유는

가상 DOM의 효율성을 극대화하고 불필요한 DOM 요소를 제거하여 성능을 최적화하기 위함입니다.

이를 통해 React는 가상 DOM의 비교와 리렌더링을 더욱 효율적으로 처리할 수 있습니다.

빈 태그를 활용하면 컴포넌트 내부에서 여러 요소를 그룹화하면서도 DOM 트리가 불필요하게 깊어지지 않도록 유지할 수 있습니다.