Warning: Each child in a list should have a unique "key" prop 콘솔 워닝 해결

데이터를 담은 객체 여러 개의 리스트를 모달에서 탭으로 보여주는 코드를 짜다가 다음과 같은 경고를 확인했다.

리스트의 child들은 각각 고유한 key값을 가져야 한다는 내용인데, 찾아보니 리액트에서 map 메서드를 사용하기 위해서는 각 아이템마다 독립적인 key를 설정해 줘야 한다고 한다.

리액트는 key prop을 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성한다. 리액트 라이브러리는 이 관계를 이용해 컴포넌트 리렌더링 여부를 결정한다. 불필요한 리렌더링을 방지하기 위해서는 각 자식 컴포넌트마다 독립적인 key값을 넣어줘야 하는 것이다.

 

처음에는 해당 탭의 인덱스를 키 값으로 넣었는데 이렇게 할 경우 child들의 key가 모두 겹치게 되어 또다른 경고(key값을 겹치지 않게 하라는)가 나타났다. 리스트 요소의 값 자체를 key로 설정하자 경고가 나타나지 않고 잘 실행되었다.

key가 전역적으로 고유할 필요는 없고 형제 요소들 사이에서만 고유하면 된다.

// 수정 전
{test[i].example.map((f) => {
	return <div>{f}</div>;
})}

//수정 후
{test[i].example.map((f) => {
	return <div key={f}>{f}</div>;
})}