Key는 왜 사용하는가?

key를 사용하는 이유

리액트에서 key를 사용하는 이유는 유동적인 데이터를 다루는 과정에서 어떠한 요소에 변화가 이루어졌을 때(생성, 제거, 수정)
key 해당 요소의 key값을 찾아 일치하는 요소만을 빠르게 찾아 변경할 수 있게 해준다.

key가 없다면 요소들을 순차적으로 비교하면서 변화를 감지하게 되는데 이는 key가 있을 때보다 더 많은 시간을 사용하게 된다.
또한 key가 없다면 배열내부에서 특정 요소의 데이터를 찾아내어 변화를 주는 일 자체가 불가능 하거나 매우 힘든 과정을 거쳐야하는데
이러한 과정을 획기적으로 줄여주는 역할을 한다.

key 설정

key를 설정할 때는 props를 설정하듯이 컨포넌트 요소의 내부에 작성한다.
html에서 id를 설정할 때 고유한 값을 id로 설정하였는데 React에서 key 값을 설정할 때도 고유한 값을 설정한다.

<div className="List">
   {props.map(list => {
      return(
         <Card 
            key={list.id} 
            name={list.name} 
            userName={list.username} />
      )
   })}
</div>

[data]

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
  },
  {
    "id": 2,
    "name": "Ndak Howell",
    "username": "Make",
  }
]

위와 같이 map를 활용하여 컨포넌트를 반복하고 싶을 때, key값을 설정하게 되는데 key값은 고유한 값을 가져야한다고 위에서 설명하였다. 그렇기에 우리는 props를 통해 데이터를 받아올 때 데이터에 id값이 주어졌을 경우 id를 불러와 사용하는게 가장 좋다.
그러나 props에 id값이 없을 경우 map함수에 전달되는 콜백함수의 index를 사용한다.

key 설정을 안했을 때

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

개발자 도구에서 이러한 에러 메시지가 뜬다면 key값을 주지 않았기 때문이니 잘못 된 부분을 찾아서 key값을 설정해주면 된다. ;)