React , {Fragment}

React component의 render 함수 return값은 jsx 문법을 쓰게 되는데

여기서 컴포넌트들은 반드시 하나의 DOM 트리구조를 가져야한다.

virtual DOM 에서 컴포넌트 변화를 감지 하기 위해서이고

이를위해 최상위 태그를 꼭 하나 써줘야 한다.

예전에는 <div>태그 혹은 섹션태그(header,nav,footer 등)를 이용해서 감쌌었으나

react는  Fragment를 지원하는데 이는 의미없는 div의 남발을 막기위해서이다.

(그치만 styling할때 다시 div태그로 바꾸는 일도 허다..)

 

<Fragment></Fragment> 혹은<> </>로 사용하며

(이상하게 내 vs-code에서는 <> </>가 적용이 안됨..)

 

최종적으로 렌더링되어 웹 브라우저에 나타나는 코드에서는 보이지 않는다.