React] Fragment <></>

Fragment 태그

처음에 컴포넌트관련해서 짧게 설명했던 컴포넌트입니다.

React에서 제공해 주는 기본 컴포넌트이며,

동일한 레벨의 태그를 반환해 줘야 될 때, 그 상위로 달아주는 용도로 사용하게 됩니다.

그렇게 되면 하나의 태그가 반환되기 때문입니다.

 

 

---

 

 

예

 

(생긴게 이상하긴 하지만...)

전체를 <></> 태그로 감싸줘서 h1, h2, span 2개가 동일 선상의 레벨로 그려지게 됩니다.

의미 없는 div나 span 등 태그를 사용하기보다는 Fragment태그를 활용하면 실제 HTML 그려질 때 좀 더 효율적으로 그릴 수 있습니다.

 

뿐만 아니라 map 돌릴 때 보면, key값을 입력해야 되는데  <Fragment key={}> 를 활용할 수 있습니다.

 

 

---

생각보다 자주 사용하게 되는 유용한 태그...