[React] Fragment

React.Fragment란?

DOM에 별도의 노드를 추가하지 않고 여러 자식 요소를 그룹화할 수 있습니다.

JSX 제한 사항

JSX 코드를 작성할 때 Root 요소가 존재하지 않고 나란히 존재하고 있다면 JSX 문법에 위반하는 행위가 됩니다.

아래의 코드와 같이 JSX는 ReactDOM 요소로 작성이 가능합니다. 한개의 Root 요소 안에는 여러개의 요소가 존재할 수 있지만 Root 요소는 여러개가 존재할 수 없다는 것입니다.

// JSX 문법에러
return (
    <h2>안녕하세요 여러분!!</h2>
    <p>만나게 되어 반갑습니다!</p>
);

// JSX 문법을 ReactDOM으로 변경한 코드
return (
	React.createElement('h2' {}, '안녕하세요 여러분!')
	React.createElement('p' {}, '만나게 되어 반갑습니다!')
);

JSX 제한 사항 해결 방안

이를 해결하기 위해서 <div>태그를 사용하는 경우 디자인 작업을 할 때 작업속도가 느려지기 때문에 대신 사용하는 것이 바로 Fragment 입니다. Fragment를 사용할 경우 아무것도 없는 요소라고 JSX문법은 판단을 하지만 Root 요소라고 판단을 하기도 합니다.

또한, div를 남발하여 사용할 경우 불필요한 div가 화면에 모두 렌더링 됩니다.

// <div>를 통한 JSX 문법 에러 해결
return (
    <div>
        <h2>안녕하세요 여러분!!</h2>
        <p>만나게 되어 반갑습니다!</p>
    </div>
);


// Fragment를 통한 JSX 문법 에러 해결
return (
    <React.Fragment>
        <h2>안녕하세요 여러분!!</h2>
        <p>만나게 되어 반갑습니다!</p>
    </React.Fragment>
);

// Fragment 단축 문법
return (
    <>
        <h2>안녕하세요 여러분!!</h2>
        <p>만나게 되어 반갑습니다!</p>
    </>
);