왜 쓰는 거야?
React 에서 JSX 를 사용할 때 return 문에는 무조건 최상위 태그가 존재해야한다.
React 는 하나의 컴포넌트만을 return 할 수 있기 때문이다.
이때, Fragment 라는 걸 사용할 수 있는데
이는 불필요한 div, span 등의 HTML 요소 없이 여러 개의 자식 요소를 렌더링 할 수 있도록 하는 기능이다.
Fragment 를 사용하면 컴포넌트의 여러 요소를 그룹화할 수 있다.
예시
예를 들어 App() 에 Table() 이라는 컴포넌트를 넣어서 사용하고 싶은 경우를 생각해보자.
Table 컴포넌트는 다음과 같다.
function Table() {
return (
<div className="Table">
<td>Hello</td>
<td>World</td>
</div>
);
}여기서 Table 컴포넌트 내의 태그들을 묶기 위해 최상위 태그로 div 를 사용했다.
그러면 최종 main 에서 보여지는 html 은 다음과 같을 것이다.
<table>
<tr>
<div className="Table">
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>만약 저기서 의미없는 div가 추가되는 것이 싫다면 React.Fragment 를 사용할 수 있다.
만약 Table 컴포넌트를 아래와 같이 작성한다면 최종 html 에서 div 를 지울 수 있다.
import { Fragment } from "react";
function Table() {
return (
<Fragment>
<td>Hello</td>
<td>World</td>
</Fragment>
);
}최종 html 을 보자
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>HTML 요소가 불필요 하게 추가되지 않아, 불필요한 마크업이 생성되는 것을 방지하고
DOM 의 불필요한 크기를 줄일 수 있음을 확인할 수 있다.
더 간결하게 쓰는 법
<Fragment> <Fragment/> 라고 쓸 수도 있겠지만
<> </> 처럼 Fragment 를 생략하고 사용할 수도 있다.
마무리
결론적으로, Fragment 를 사용하는 이유는
불필요한 HTML 요소를 줄이기 위해서라고 볼 수 있겠다.
실제로 React Fragment 를 사용해본다면 전체적인 코드를 봤을 때
필요없어보이는 div 태그를 지움으로써 좀 더 코드가 간결해보일 수 있겠다는 생각을 했다.
잘 익혀두고 필요할 때 활용해보자!
