React.Fragment

React.Fragment란?

React.Fragment는 React에서 여러 요소를 그룹화할 때 사용되는 컴포넌트

=> DOM에 별도의 노드를 추가하지 않고 여러 자식 Element들을 그룹화할 수 있는 기능이다.
=> 기본적인 사용법은 아래 코드와 같이 자식 요소들을 감싸주는 형태로 사용한다.
=> 주로 JSX에서 반환되는 요소가 여러 개인 경우에 사용된다. 예를 들어, 배열의 요소를 감싸지 않고도 여러 요소를 반환하고자 할 때 유용하다.

React.Fragment의 장점

1. 불필요한 DOM 노드 제거: 추가적인 DOM 노드 없이 JSX 트리 구조를 단순하게 유지할 수 있다.
2. 성능 최적화: 불필요한 래퍼 노드를 추가하지 않기 때문에 성능 측면에서 약간의 이점을 얻을 수 있다.

React.Fragment 사용방법

React.Fragment 또는 짧은 구문인 빈 태그 <>와 </>을 사용하면 된다.

import React from 'react';

const FragmentExample = () => {
  return (
    <React.Fragment>
      <h1>Title</h1>
      <p>This is a paragraph.</p>
    </React.Fragment>
  );
}

export default FragmentExample;