컴포넌트가 여러 엘리먼트를 반환할 때는 하나의 태그로 묶어 반환해야한다.
render() {
return (
<div>
<ChildA />
<ChildB />
<ChildC />
</divt>
);
}
JavaScript
복사
그러나 컴포넌트가 여러개의 엘리먼트를 반환해야할 때가 있다.
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
JavaScript
복사
table 엘리먼트가 작동하기위해서는 tr 태그 바로 뒤에 td 태그가 와야한다.
하지만 Columns 컴포넌트가 여러개의 td 엘리먼트를 반환하기 위해서는 하나의 태그로 묶어줘야한다.