[React] Map의 unique key prop 에러 해결하기

→ map 메서드를 사용하여 리스트 반복 시, 위와 같은 key prop 에러를 여러 번 마주한 적이 있습니다. 이를 해결할 수 있는 방법 2가지를 정리해보았습니다.

1. map의 index 속성 이용

: map은 배열의 원소 값 외에도 현재 요소의 인덱스 값을 인자로 가지고 있습니다. 따라서 아래 예시 코드처럼 key 값을 부여할 수 있습니다.

{users.map((value, index) => (
   <tr key={index}>
     <td>{value}</td>
  </tr>
))}

2. Children.toArray() 이용

: 아래 예시 코드처럼 Children.toArray()으로 감싸주면 자동으로 고유한 key 값이 지정됩니다. 즉, 고유한 key 값을 리액트에게 맡기는 함수라고 생각하면 됩니다.

{Children.toArray(
  users.map((value) => (
    <tr>
    <td>{value}</td>
    </tr>
  ))
)}