Fragments

 

 

  React에서 컴포넌트가 여러 엘리먼트를 반환하는 것은 흔한 패턴이다. Fragments를 통해 DOM에 별도의 노드를 추가하지 않고 여러 자식 컴포넌트를 그룹화할 수 있다.

return (
	<React.Fragment>
    	<ChildA />
        <ChildB />
        <ChildC />
    </React.Fragment>
)

 

  아래와 같은 예시가 있다고 하자.

function Table() {
	...
    
    return (
    	<table>
        	<tr>
            	<Column />
            </tr>
        </table>
    )
}

function Column() {
	return (
    	<div>
        	<td>Hello</td>
            <td>World</td>
        </div>
    )
}

이 Table 컴포넌트가 렌더링 된 HTML이 유효하려면 Column 컴포넌트는 td 엘리먼트만 반환해야 한다. 만약 div 엘리먼트로 여러 td 엘리먼트를 감싼다면 렌더링 된 HTML이 유효하지 않다. 출력결과 아래와 같을 것이다.

<table>
	<tr>
    	<div>
        	<td>Hello</td>
            <td>World</td>
        </div>
    </tr>
</table>

  Fragments는 이 문제를 해결해 준다. Column을 Fragments를 사용해 이렇게 작성하면 된다.

function Column() {
	return (
    	<React.Fragment>
        	<td>Hello</td>
            <td>World</td>
        <React.Fragment>
    )
}

이 경우 Table 컴포넌트가 렌더링된 HTML은 이럴 것이다.

<table>
	<tr>
    	<td>Hello</td>
        <td>World</td>
    </tr>
</table>

 

  Fragments를 선언하는 더 짧고 간단한 문법이 있다. 빈 태그와 같이 작성하면 된다.

function Column() {
	return (
    	<>
        	<td>Hello</td>
            <td>World</td>
        </>
    )
}

이 단축 문법의 경우 key 또는 어트리뷰트를 지원받지 못한다는 단점이 있다.

 

  Fragments에 key가 있으면 <React.Fragment> 문법으로 명시적으로 선언해야 한다.

function Glossary(props) {
	return (
    	<dl>
        	{props.items.map(item => (
            	<React.Fragment key={item.id}>
                	<dt>{item.term}</dt>
                    <dd>{item.description}</dd>
                </React.Fragment>
            ))}
        </dl>
    )
}

key는 Fragment에 전달할 수 있는 유일한 어트리뷰트이다. 

 

참조: React 공식문서 고급 안내서 Fragment