반복되는 요소에 넣은 key 값이 적용되지 않는 경우

React에선 반복되는 요소가 있을 시 key 값을 넣어줘야 한다. 그렇지 않으면 오류가 발생한다.

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

이런 식으로.

당연히 알고 있는 문제이기에, <li>에 key 값을 넣어줬지만, 오류가 사라지지 않았다. 대체 뭐가 문제일까... 하고 내 코드의 오류에 대해서, 그리고 key 값에 대해서 조사했다.

기존에 내가 작성한 코드는

<ul>
  {items.map((item: any) => (
    <>
      <li key={item.id}>
        <Card />
      </li>
    </>
  ))}
</ul>

다음과 같았는데, 이것이 문제였다. 반복되는 요소의 최상위 Fragment에 key 가 없기 때문이다. React는 map()으로 반복된 요소 중 가장 바깥 요소에 key를 요구한다. 즉, 기존 코드에서 내 최상외 요소는 <> 인데, 여기에 key가 없으니 오류라고 내뱉는 것이었다.

이 문제는 단순히 <>를 제거하고 <li>를 최상위 요소로 만들거나, 최상위 요소를 <React.Fragment key={item.id}> 로 변경하면 되었다. 나는 굳이 최상위 요소를 <>로 둘 이유가 없었기에, <li>를 최상위 요소로 만들어 문제를 해결했다.

<ul>
  {items.map((item: any) => (
    <li key={item.id}>
      <Card />
    </li>
  ))}
</ul>

<>가 단순히 내부의 요소들을 하나의 코드로 묶어주는 역할만 한다고 생각했는데, 이것도 하나의 요소로 취급된다는 것을 알았다. 이에 대한 공부도 해봐야겠다.