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

React에서 Array의 map 함수를 사용하면 가끔가다 이런 경고가 보인다.

 

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

 

warning이라 당장은 실행이 가능하지만 개발을 하다보면 보기도 안좋고

잠재적으로 어떤 문제가 나올지 모르니 해결해주도록 하자.

 

원인 : 배열을 이용하여 요소를 그려줄 때는 key라는 고유한 값을 prop으로 전달 받아야 한다.

해결 : map을 이용해 그려주는 요소에 key 값을 부여하면 된다

 

 

 

아래부터는 이해를 돕기위한 설명들

 

이와 같이 코드를 입력하고 실행하니

 

Warning 발생

Warning이 발생한다.

그럼 아무 키나 부여해보자

 

아무 키나 넣어보았다.

 

새로운 Waning

Encountered two children with the same key, `i'm Key!`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

 

내가 넣은 키값까지 언급하며 새로운 Waning을 뱉어준다

고유해야 한다는 걸 간과했다.

 

배열의 index를 넣어보았다.

가장 간단하게 할 수 있는 map함수를 사용 할 경우 반환 받는 index를 넣어보았다.

Waning이 사라진다.

하지만 index를 key 값으로 넣는 것은 지양해야 하는 패턴이라 한다.

 

Why? 간단하게 설명하자면 배열에 추가와 삽입이 있을 경우에

index가 변하기 때문에 원하는 결과를 얻지 못 할 수 있다.

아래는 직접 문제점을 테스트 해 본 게시물이다. 

React ) 배열의 map 함수를 쓸 때 index를 key값으로 넣으면 안된다?

그렇기 때문에 우리는 배열 내의 고유한 값인 id를 이용하여 key값으로 넣어주겠다.

 

최종 수정

이와 같이 수정해주면 문제 해결 !

 

 

나는 평소에 index를 key값으로 사용하는 습관이 있었다.

고유하면 되는거 아닌가 생각하여 human_${index} 이런식으로 사용하고는 했었는데.

게시물 작성을 위해 자료를 찾다보니

고유해야 하는 문제가 아닌 index 자체가 key 속성의 구성품이 되면 안된다는 것이었다.

평소에 크게 문제 되는 동작이 없어서 안일하게 생각 한 것 같다.

 

검색하다 보니 index를 키 값으로 사용해도 되는 경우가 있다고 하는데

아래 세가지의 조건을 모두 만족해야 한다

1. 배열과 각 요소가 static이며 computed 되지 않고 변하지 않아야 한다.
2. 데이터 내부에 id로 쓸만한 unique 값이 없을 경우
3. 데이터가 결코 reordered or filtered 되지 않을 경우

 

앞으로 코드를 신경써서 작성해야겠다 ㅠ_ㅠ

 

 

참조 사이트 

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

2) https://medium.com/sjk5766/react-%EB%B0%B0%EC%97%B4%EC%9D%98-index%EB%A5%BC-key%EB%A1%9C-%EC%93%B0%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-3ce48b3a18fb

3) https://hippocode.tistory.com/15