[React] Warning: Each child in a list should have a unique "key" prop in Fragment

 React에서 리스트를 활용해서 화면 요소를 만들어 낼 때는 태그에 key 속성을 부여하는 것이 좋다. React 공식 문서에 따르면 key에 대해 다음과 같이 설명한다.

 

 "Keys help React identify which Items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity"

 

 key 속성은 어떤 요소들이 추가, 삭제, 변화가 있을 때 React 라이브러리가 쉽게 찾아낼 수 있도록 하는 역할을 한다. 찾아보니 실제 DOM과 가상 DOM을 비교하는 diffing 알고리즘에서 활용되는 것 같다.

 

 회사 프로젝트를 하면서 제목과 같은 warning이 발생하였다. 그것도 Fragment에서. 분명 모든 리스트 요소에 key 값을 넣어 주었다. 어떤 부분에서 warning이 발생했는지 정확히 알고자 render 메소드 내부에 있는 모든 JSX를 주석처리 해도 계속해서 warning이 발생했다.

 

warning in Fragment

 알고보니 리스트의 map 메소드를 활용해 테이블 관련 태그 항목들을 만들어 내는 부분이 있었고, 그 항목 중 일부분에서 <></>의 형태로 Fragment가 사용되고 있었다. <React.Fragment></React.Fragment> 형태로 바꾸고 내부에 key 속성을 설정해 주었더니 더 이상 warning은 발생하지 않았다. 전자 형태의 Fragment는 key 속성을 부여할 수 없기 때문이다.

 

 렌더링 과정에서 사용하지 않는 요소라고 할지라도 warning을 뱉어내는 것이 신기했다.

 

참고자료

https://reactjs.org/docs/lists-and-keys.html#keys

Lists and Keys – React

https://betterprogramming.pub/why-react-keys-matter-an-introduction-136b7447cefc

Why Keys Matter in React