리액트에서 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
를 사용한다.
Warning: Each child in a list should have a unique "key" prop.
개발자 도구에서 이러한 에러 메시지가 뜬다면 key값을 주지 않았기 때문이니 잘못 된 부분을 찾아서 key값을 설정해주면 된다. ;)