1. 문제상황
Warning: Each child in a list should have a unique "key" prop
-
map을 사용하면서 고유한 key값을 주었다고 생각했는데, 다음과 같은 오류가 반복적으로 생겼다...!😅
-
처음에는 "index로 key값을 할당해서 그런가...?" 라는 생각으로 고유한 속성값을 지정해 주었지만, 또다시 같은 오류가 발생하였다.
2. 솔루션
2-1. 잘못된 코드
{ list.map((item)=>( <> <div key={item.id}> ~ </div> </> )) }
- 스택오버플로우를 뒤진 결과,
React Fragment (<>~</>)를 넣어준 것이 원인이었다. - key값이 루트 컴포넌트에 적용되어야 하는데, Fragment 부분이 root로 map 처리 되어 버려 계속 에러가 뜨는 것이었다.
2-2. 개선한 코드
{ list.map((item)=>( <div key={item.id}> ~ </div> )) }
- map 처리될 영역 내에 React Fragment(<>~</>)을 제거해 주니 콘솔창에 에러가 제거되었다😊
jlog