1. Warning

리액트에서 개발을 하다보면 종종 아래와 같은 경고 문구를 마주할 때가 있다.

• Warning: Each child in a list should have a unique "key" prop.
  

말 그대로 리스트(배열) 안의 각각의 요소들이 유일한 key 값을 가지고 있어야 한다는 의미이다. 주로 영상을 나열한다거나, 댓글을 나열할 때 key를 지정해주지 않으면 이러한 경고 문구가 떴다.😀

2. 해결 방법

💡 javaScript map 메소드의 index 값을 활용하여 해결!

• map 메소드 기본구문

	arr.map(callback(currentValue[, index[, array]])[, thisArg])

map()은 배열의 각각의 요소를 currentValue에 담아 차근차근 콜백 함수에 전달해준다. 이때 매개변수 옵션으로 index와 array를 불러올 수 있다.
index는 현재 처리할 요소의 인덱스값이고, array는 현재 map()을 호출하고 있는 배열이다.

• index값을 key로 지정

{/* comment lists */}

{props.commentLists && props.commentLists.map((comment, index) => (
                <React.Fragment key={index}>
                    
                        ...
                                              
                </React.Fragment>
))}

위 코드는 상품 디테일 페이지의 일부분으로, 특정 상품에 달린 후기를 댓글 형태로 나열해주는 부분이다.

댓글 정보가 존재한다면 map 메소드를 이용하여 각각의 comment들을 차례차례 하나의 태그에 담아 화면에 출력한다.

이때, key값으로 index를 넣어주어서 각각의 요소들이 0부터 1씩 증가하는 유니크한 키값을 가질 수 있도록 했다.

이러한 방법을 통해 Warning: Each child in a list should have a unique "key" prop. 이라는 경고 문구를 없앨 수 있었다. 😋

References

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map