[React] <React.Fragment> 용도

<React.Fragment>는 React에서 여러 요소를 그룹화하여 하나의 부모 요소처럼 사용하지만, DOM에는 추가적인 태그로 렌더링되지 않도록 해주는 래퍼 컴포넌트입니다. 다음은 <React.Fragment>의 용도와 장점입니다.

1. 여러 요소를 감쌀 때 부모 요소 필요성 해결

React에서는 컴포넌트가 여러 요소를 반환할 때 하나의 부모 요소로 감싸야 합니다. <React.Fragment>를 사용하면 불필요한 <div> 같은 태그를 추가하지 않고 요소를 그룹화할 수 있습니다.

// <div>를 사용한 경우
function Component() {
    return (
        <div>
            <h1>Title</h1>
            <p>Paragraph</p>
        </div>
    );
}

// <React.Fragment>를 사용한 경우
function Component() {
    return (
        <React.Fragment>
            <h1>Title</h1>
            <p>Paragraph</p>
        </React.Fragment>
    );
}

 

위의 두 코드는 같은 UI를 보여주지만, <React.Fragment>를 사용한 경우 DOM에 <div>가 추가되지 않아 구조가 간결해집니다.

 

2. 단축 문법 사용

<React.Fragment> 대신 <></>로도 사용할 수 있습니다. JSX에서 지원하는 단축 문법으로, 더욱 간편하게 사용할 수 있습니다.

function Component() {
    return (
        <>
            <h1>Title</h1>
            <p>Paragraph</p>
        </>
    );
}

 

 

단축 문법은 속성을 추가할 수 없는 제한이 있으므로, key 속성 등 특수 속성이 필요한 경우에는 <React.Fragment>를 사용해야 합니다.

3. 성능 최적화

불필요한 DOM 노드를 생성하지 않으므로, DOM이 간결해지고 성능 면에서 이점이 있습니다. 특히, 리스트를 렌더링할 때 여러 요소를 묶으면서 추가적인 DOM을 피할 수 있습니다.

function ItemList({ items }) {
    return (
        <>
            {items.map((item, index) => (
                <React.Fragment key={index}>
                    <dt>{item.term}</dt>
                    <dd>{item.description}</dd>
                </React.Fragment>
            ))}
        </>
    );
}

위 코드에서 key 속성을 <React.Fragment>에 추가하여 리스트의 각 항목을 구분할 수 있습니다.