React.js 프래그먼트(Fragments) 사용법: 불필요한 래퍼 제거

작성일 : 2024-07-18

React.js 프래그먼트(Fragments) 사용법: 불필요한 래퍼 제거

React.js를 사용하다 보면 부모 요소로 불필요한 래퍼(wrapper)를 만들어야 하는 상황이 자주 발생합니다. 이러한 불필요한 요소들은 DOM 구조를 복잡하게 만들고, 스타일링 작업을 더 어렵게 합니다. React 프래그먼트(Fragments)를 사용하면 이러한 문제를 해결할 수 있습니다. 이번 글에서는 React 프래그먼트를 사용하여 불필요한 래퍼 요소를 제거하는 방법을 배우고, 실제 예제를 통해 이해해보겠습니다.

프래그먼트란 무엇인가?

프래그먼트는 JSX에서 여러 자식을 그룹화하면서도 DOM에 추가적인 노드를 생성하지 않는 기술입니다. 일반적으로 컴포넌트 내부에서 여러 요소를 반환해야 할 때, 우리는 div 또는 다른 HTML 요소로 감싸야만 했습니다. 그러나 이는 불필요한 부모 요소를 생성하는 단점이 있었습니다. 이 문제를 해결하기 위해 React에서는 프래그먼트를 도입했습니다.

기본 사용법

React 프래그먼트를 사용하는 기본 방법은 다음과 같습니다:


jsx
import React from 'react';

function MyComponent() {
  return (
    <React.Fragment>
      <h1>안녕하세요</h1>
      <p>이것은 프래그먼트를 사용한 예제입니다.</p>
    </React.Fragment>
  );
}

또는 더 짧게, 빈 태그 <>와 </>를 사용할 수 있습니다:


jsx
function MyComponent() {
  return (
    <>
      <h1>안녕하세요</h1>
      <p>이것은 프래그먼트를 사용한 예제입니다.</p>
    </>
  );
}

이 두 가지 방식 모두 동일하게 작동하며, DOM에는 h1과 p 요소만 생성됩니다.

왜 프래그먼트를 사용해야 하는가?

프래그먼트를 사용하면 여러 이점이 있습니다. 그 중 몇 가지는 다음과 같습니다:

불필요한 래퍼 요소 제거: 프래그먼트를 사용하면 불필요한 <div>나 기타 HTML 요소들을 제거하여 더 간결한 DOM 구조를 유지할 수 있습니다.
성능 향상: 불필요한 HTML 요소를 제거하므로 브라우저의 렌더링 성능을 개선할 수 있습니다.
스타일링 편리성: CSS 스타일링의 타겟팅이 더 명확해지고 단순해집니다.
유연한 컴포넌트 설계: 컴포넌트가 특정 HTML 요소에 종속되지 않으므로 더 유연하고 재사용 가능한 컴포넌트를 설계할 수 있습니다.

실제 예제

이제 실제 예제를 통해 프래그먼트를 사용하는 방법을 더욱 깊이 이해해보겠습니다. 다음은 자식 컴포넌트를 여러 개 렌더링하면서 프래그먼트를 사용하는 예제입니다:


jsx
import React from 'react';

function Item({ name }) {
  return <li>{name}</li>;
}

function ItemList() {
  const items = ['사과', '바나나', '체리'];
  return (
    <ul>
      {items.map((item, index) => (
        <React.Fragment key={index}>
          <Item name={item} />
        </React.Fragment>
      ))}
    </ul>
  );
}

위 코드에서 각 Item 컴포넌트는 React.Fragment로 감싸져 있으며, key 속성은 여전히 필요한 상태입니다. 그러나 DOM에는 오직 li 요소만 생성됩니다.

고급 사용법: 속성 전달

프래그먼트에도 일반적인 HTML 요소처럼 속성을 전달할 수 있습니다. 예를 들어, table의 컬럼을 정의할 때 다음과 같이 사용할 수 있습니다:


jsx
import React from 'react';

function Table() {
  return (
    <table>
      <thead>
        <tr>
          <React.Fragment>
            <th>이름</th>
            <th>나이</th>
          </React.Fragment>
        </tr>
      </thead>
      <tbody>
        <tr>
          <React.Fragment>
            <td>John</td>
            <td>30</td>
          </React.Fragment>
        </tr>
      </tbody>
    </table>
  );
}

이 예제에서 thead와 tbody 내에서 React.Fragment를 사용하여 불필요한 래퍼 요소를 피할 수 있습니다. 이렇게 하면 DOM 구조가 더 간결해집니다.

결론

React 프래그먼트는 불필요한 래퍼 요소를 제거하여 더 간결하고 효율적인 DOM 구조를 유지할 수 있게 해주는 매우 유용한 기능입니다. 기본적인 사용법부터 고급 사용 사례까지 살펴보았습니다. 프래그먼트를 적극적으로 활용하여 컴포넌트를 더 깨끗하고 관리하기 쉽게 만들어 보세요.