[React] Each child in a list should have a unique "key" prop.

map 함수를 이용할 때 Each child in a list should have a unique "key" prop. 에러를 가끔씩 볼 수 있다.

 

이 에러는 map으로 리스트를 만들 때 key prop을 주지 않아서 발생하는 문제다.

 

키값으로 사용할 고유한 값이 없다면 인덱스 값을 키값으로 사용할 수도 있긴 하다.

그렇지만 자바스크립트의 배열은 정적이지 않아서 배열의 길이나 원소가 변할 수 있다. 그렇기 때문에 잘못된 컴포넌트가 리렌더링되기도 할 수 있다.

 

그렇기 때문에 배열의 각 요소가 갖고 있는 고유한 값을 키값으로 이용하는 것이 좋다.

{result.map((res) => (
  <div key={res.userId}>
    <div>{res.userName}</div>
    <div>{res.description}</div>
    <div>{res.photo ?? null}</div>
  </div>
))}

 

나는 result 배열의 원소들은 각각 고유한 userId를 갖고 있기 때문에 이것을 키값으로 사용했다.

 

 

 

[참고]

https://crong-dev.tistory.com/47