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

React로 구현을 하다 보면 Warning: Each child in a list should have a unique "key" prop. 해당 에러가 발생할 때가 있다. 해당 문제를 해결해보도록 하자.

해결하기

[기존 코드]

const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

return (
  <div>
    {items.map(item => <span>{item}</span>)}
  </div>
)

위 코드는 items 배열을 map으로 반복하면서 span tag에 값을 1개씩 넣어 출력하는 코드이다. map을 사용할 때는 최상위 tag에 key라는 속성을 넣어주어야 한다. key는 변경되지 않아야 하며, 중복되지 않아야 한다. 따라서 해당 배열의 값들이 중복되지 않으므로 값을 key로 사용하면 된다.

 

[수정 코드]

const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

return (
  <div>
    {items.map(item => <span key={item}>{item}</span>)}
  </div>
)​

위와 같이 수정하면 더 이상 에러가 발생하지 않는다. 다른 방법으로 많은 개발자가 배열 index를 key로 사용하곤 한다.

 

const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

return (
  <div>
    {items.map((item, index) => <span key={index}>{item}</span>)}
  </div>
)​

물론 위와 같이 해도 에러는 발생하지 않지만, index는 배열이 재배열 되는 경우 문제가 생길 수 있다. 별로 좋은 방법은 아니니 웬만하면 다른 고유값을 key로 사용하고, 도저히 사용할 값이 없는 경우 index를 사용하길 바란다.

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.