fragment 의 장점(사용이유)

fragment의 개념

🤔 fragment를 사용하는 이유

• React는 하나의 엘리먼트만 리턴할 수 있기 때문에, 여러 개의 태그를 리턴하기 위해서는 하나의 부모 태그가 필요 했음.
• 그래서 불필요하게 div 태그를 쓰게 되었는데, fragment를 사용하면 불필요한 렌더링을 피하며 여러 개의 태그를 리턴 할 수 있음.
• 즉, 리액트의 Fragment는 불필요한 html 노드의 추가 없이 리액트 컴포넌트를 렌더링 할 수 있게 해줌.
• 위와 같은 상황에서도 사용되고, 조건부 렌더링에서도 사용됨.
• map 함수와 함께 배열을 렌더링할 때에도 유용한데, 리액트의 배열 렌더링에 필요한 key props를 가질 수 있기 때문. (단, 단축문법인 <> </> 태그에서는 key 사용이 불가하므로 명시적으로 사용할 때만 가능 !)

📌 정리

• 애플리케이션의 크기가 점점 커지면, DOM에서 쓸모없는 div의 수도 증가하게 됨. 리액트의 Fragment는 불필요한 div를 없앰으로서 불필요한 DOM node의 생성을 막기 때문에 Fragment를 사용하지 않은 리액트 어플리케이션보다 조금 더 빠르다 !
  (하지만 컴포넌트가 정말 많을 때의 이야기)