React fragment tag <>

리액트에서는 여러 react element를 반환하는 것을 금지한다

 

<> fragment 태그를 이용할 수 있다

<div> 태그를 사용해도 되지만

fragment 를 사용할 경우 dom에 노드로 추가되지 않는다
배열로 요소를 반환하는것과 비슷하게 볼 수 있다

 

 

 

 

 

div 태그의 장단점

장점 

 

• 모든 브라우저에서 지원
• 스타일을 적용하거나 이벤트 핸들러를 추가 가능

단점

 

• 불필요한 DOM 노드를 추가하여 DOM 트리가 복잡질 가능성
• 특정 레이아웃(ex. 테이블 구조)에서 사용하면 HTML 구조를 해칠 수 있다

 

<> fragment 장단점

장점

 

• 추가적인 DOM 노드를 생성하지 않아 DOM 트리를 깔끔하게 유지
• 성능상 약간의 이점이 있을 수 있다 (불필요한 노드가 없으므로).
• 레이아웃을 해치지 않고 여러 요소 그룹화 가능

단점

 

• 오래된 브라우저에서는 지원되지 않을 가능성
• 스타일을 적용, 이벤트 핸들러를 직접 추가 불가

 

=>

코드의 가독성과 유지보수성을 위해, 의미 있는 그룹화가 필요한 경우에는 <div>를 사용,

단순히 JSX 문법을 만족시키기 위해 요소를 감싸야 하는 경우에는 <>를 사용하는 것이 좋다