JSX 파일 규칙상 return 시 하나의 태그로 묶어야한다.
이런 상황에 Fragment
를 사용하면 쉽게 그룹화가 가능하다.
아래와 같이 Table 컴포넌트에서 Columns를 불렀다고 가정해보자
import Columns from '../Components';
function Table() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
export default Table;
Columns 컴포넌트에서는 <td> ~~ </td>
와 같은 element를 반환해야 유효한 테이블 생성이 가능할 것이다. 여러 td 태그를 작성하기 위해 div 태그로 묶었다.
(JSX 파일 규칙상 return 시 하나의 태그로 묶어야한다.)
function Columns() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
export default Columns;
이제 Table 컴포넌트에서 DOM 트리를 그렸을 때 어떻게 결과가 나오는지 확인해보자
Columns 컴포넌트에서 div
태그로 묶어서 Table 컴포넌트로 보냈기 때문에 문제가 발생한다. 따라서 JSX 파일의 return 문을 무조건 div
태그로 묶는 것이 바람직하지 않을 수 있다.
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
이때 사용할 수 있는 문법이 바로 Fragment
이다.
*div
태그 대신에 Fragment
로 감싸주면 문제가 해결된다. Fragment는 DOM 트리에 추가되지 않기 때문에 정상적으로 Table을 생성할 수 있다.*
function Columns() {
return (
<Fragment>
<td>Hello</td>
<td>World</td>
</Fragment>
);
}
export default Columns;
*Fragment
로 명시하지 않고, 빈 태그로도 가능하다.*