[Trouble Shootings #13] React - Fragment에도 key 속성 지정이 가능합니다!

React에서 무분별한 div 태그 남용 방지를 위해 <></> 와 같은

 

React.Fragment 태그를 자주 사용합니다.

 

하지만 JS의 순수함수인 map 함수를 이용하여 리스트를 렌더링 할 때,

 

key 속성을 unique 하게 잘 지정하는 것이 중요한데

 

다른 사람 코드를 보면 종종 프래그먼트의 경우 key 속성을 지정 못한다고 생각하여

 

의미없는 div 태그를 하나 더 만들어서 key 속성을 지정하는 것을 보았습니다.

 

하지만 그럴 필요가 전혀 없습니다.

 

현재 리액트에서 제공하는 React.Fragment 태그에 key 속성을 제공합니다.

 

물론 프래그먼트 축약 형태인 <></> 에 사용할 수는 없고

 

<React.Fragment key=""></React.Fragment> 와 같은 형태에서 사용이 가능합니다.

 

물론 내부적으로 빠른 노드 검색 최적화를 위한 reconciliation 알고리즘이 적용되어 있을거라 유추됩니다.

 

앞으로는 Fragment에 key 속성을 적용하시면서 편하게 사용하시면 좋을 것 같습니다!

---

[레퍼런스 1] - Fragments (React 공식 문서)