[JS] React.js Fragment 알아보기

Fragments 

React의 패턴은 Component가 여러 요소를 반환하는 것이 일반적입니다. 

Fragements 를 사용하면 DOM 노드에 추가하지 않고 하위의 목록을 그룹화 할 수 있습니다.

render() {

return (

<React.Fragment>

<ChildA />

<ChildB />

<ChildC />

</React.Fragment>

);

}

새롭게 짧은 구문도 나왔지만, 아직 많은 툴에서 지원하지 않고 있습니다.

Motivation

일반적인 패턴은 아래와 같이 컴포넌트가 자식리스트를 반환하는 것 입니다. 

class Table extends React.Component {

render() {

return (

<table>

<tr>

<Columns />

</tr>

</table>

);

}

}

<Colums /> 는 HTML이 정상적으로 동작하기 위해 여러개의 <td> 요소들을 반환해야 합니다. 

만약 부모 div가 <Columns />의 render() 안에서 사용되었다면, HTML는 정상적으로 동작하지 않을 것 입니다.

다음과 같이 말이죠

class Columns extends React.Component {

render() {

return (

<div>

<td>Hello</td>

<td>World</td>

</div>

);

}

}

<Table /> 의 결과는 다음과 같습니다.

<table>

<tr>

<div>

<td>Hello</td>

<td>World</td>

</div>

</tr>

</table>

그래서 이 포스팅에서는 Fragment를 사용합니다.

Usage

class Columns extends React.Component {

render() {

return (

<React.Fragment>

<td>Hello</td>

<td>World</td>

</React.Fragment>

);

}

}

위와 같이 <React.Fragment> 태그를 부모 태그로 사용해보세요.

이제 <Table />의 결과는 다음과 같습니다. 

<table>

<tr>

<td>Hello</td>

<td>World</td>

</tr>

</table>

Short Syntax

새롭게 쓸 수 있는 구문이 있습니다. 빈 태그 처럼 보이는데요,

class Columns extends React.Component {

render() {

return (

<>

<td>Hello</td>

<td>World</td>

</>

);

}

}

Fragment를 사용하기 위해 <></> 와 같이 빈 태그처럼 보이는 요소를 사용할 수 있습니다. 

하지만, 위에도 언급 했듯이, 아직 많은 툴에서 지원을 하고 있지 않습니다. 그래서 툴이 지원되기 전까지 일단은 React.Fragment를

사용하는게 좋겠죠?

Keyed Fragments

<React.Fragment> 구문으로 선언된 Fragment에는 key가 있을 수 있습니다. 이를 위해서는 컬렉션을 배열로 만들어 Fragment에 매핑하는 것 입니다. - 예를 들어 설명 리스트를 작성하는 경우에는 다음과 같이 할 수 있습니다.

function Glossary(props) {

return (

<dl>

{props.items.map(item => (

// Without the `key`, React will fire a key warning

<React.Fragment key={item.id}>

<dt>{item.term}</dt>

<dd>{item.description}</dd>

</React.Fragment>

))}

</dl>

);

}

key는 단일 속성으로 Fragment로 전달됩니다. 나중에는 더 많은 속성들을 이벤트 핸들러처럼 지원할 예정이라고 합니다.

감사합니다.