React Fragments를 왜 사용하는가?

 

✔️ React Fragments 사용 이유

 

react 공식문서 왈

A common pattern in React is for a component to return multiple elements
Fragments let you group a list of children without adding extra nodes to the DOM.
React의 일반적인 패턴은 구성 요소가 여러 요소를 반환하는 것입니다.
프래그먼트를 사용하면 DOM에 노드를 추가하지 않고도 자식 목록을 그룹화할 수 있습니다.

 

리액트는 컴포넌트가 반환하는 return 문 안에 반드시 하나의 최상위 태그가 있어야 한다. 

 

return (
<div> // 최상위 태그 반드시 필요!
  <span>lalalala</span>
  <span>lalalala</span>
</div>
)

 

컴포넌트의 역할이 뚜렷하면 header나 main과 같은 태그를 최상위 태그로 지정해주면 되지만
그렇지 않을 경우 굉장히 고민될 때가 많았다..

그때 의미 없는 div 태그를 사용하면 DOM에도 결국 div 가 추가되는 것이다. (DOM 부담감 UP)

그래서 DOM에 부담을 주지 않고 엘리먼트를 감싸기 위해 React Fragments 태그를 사용하는 것이다. 

 

return (
<React.Fragments>
  <span>lallala</span>
  <span>lalalal</span>
</React.Fragments>
)

 

위와 같이 사용하게 되면 DOM에는 쓸데 없는 태그 추가 없이 (DOM에 새로운 노드 추가 X) 엘리먼트를 반환할 수 있다. 

 

 

✔️  React Fragments 단축 문법

 

그동안 아무 생각 없이 쓸데 없는 태그를 추가하고 싶지 않아서 사용했던 빈 태그 <></> 가 React.Fragments의 단축 문법이였다.

(난 아직 갈 길이 멀구나 ... ㅜㅜㅜ)

 

단축 문법을 사용할 때는 엘리먼트에 key를 적용할 수 없기 때문에 사용을 지양하는 게 좋다고 한다.