<></><React.Fragment>의 차이

React를 공부하면서 때때로 <><React.Fragment>를 혼동할 수 있습니다. 이 둘은 React에서 여러 요소를 감싸는 데 사용되며, 대부분 <>의 모던한 문법을 사용합니다. 쉽게 말해 거의 비슷하거나 같습니다.


React.Fragment를 왜 사용하는가?

React에서 컴포넌트는 보통 하나의 부모 요소로 감싸져 있어야 합니다.

  • Name
    <React.Fragment>
    Type
    Description

    이를 해결하기 위해 React는 Fragment라는 개념을 도입했습니다. Fragment를 사용하면 여러 요소를 그룹화하거나 부모 요소 없이 여러 자식을 반환할 수 있습니다.

  • Name
    <>
    Type
    Description

    <></>는 React.Fragment의 단축 문법입니다.

<React.Fragment>

function App() {
    return (
        <React.Fragment>
            <ChildA />
            <ChildB />
            <ChildC />
        </React.Fragment>
    );
}

<>

function App() {
    return (
        <>
            <ChildA />
            <ChildB />
            <ChildC />
        </>
    );
}

<><React.Fragment> 차이점

두 방식 사이에 기능적인 차이점은 없으며, 대부분 같은 기능입니다.

  • Name
    Key props
    Type
    Description

    React.Fragment는 key props를 지원하지만, 단축 문법인 <></>는 지원하지 않습니다. 따라서 map과 같은 반복문 안에서 Fragment를 사용해야 할 경우에는 React.Fragment가 필요합니다.

  • Name
    개발자 취향
    Type
    Description

    몇몇 개발자는 <>...</>보다 <React.Fragment>...</React.Fragment>가 읽기 쉽다고 느낄 수 있습니다.

  • Name
    호환성
    Type
    Description

    모든 도구가 단축 문법을 지원하지 않을 수 있으므로, 호환성 문제가 우려되면 React.Fragment를 사용하는 것이 좋습니다.

<React.Fragment>

function List({ items }) {
    return items.map(item => (
        // key prop is needed when creating a list of elements
        <React.Fragment key={item.id}>
        {/* ... */}
        </React.Fragment>
    ));
}

결론

따라서 이 두 가지 방식 중 어느 것을 선택할지 결정하는 것은 대체로 스타일링과 개인적인 선호도에 따라 다릅니다.

React Fragment 혹은 <></> 를 사용하는 것이 DOM에 추가적인 노드를 생성하지 않기 때문에 성능상의 이점이 있다는 점입니다. 즉, <div>나 다른 HTML 태그로 감싸는 것보다 <React.Fragment><></>를 사용하는 것이 더 효율적입니다. 그러나 이것은 일반적인 경우를 말하는 것이며, 항상 그런 것은 아니므로 상황에 따라 적절히 선택해야 합니다.