[React] map함수 쓸 때 key 속성을 넣는 이유

React 강의를 듣는데

state.map((a,i)=>
	<div>
		...
    </div>
)

map함수를 쓸 때 key속성을 넣어주지 않으면

콘솔창에 이런 worning이 뜬다.

선생님도 자세한 설명은 생략하셔서 직접 찾아보려고 함.

🤔 key 값을 왜 넣어주어야 할까?

우선 key는 react가 어떤 항목을 변경, 추가, 삭제할 지 식별하는 것을 도와준다.
react는 업데이트 요소들을 기존의 요소들과 비교 후 변경하는데 이때 key로 식별을 하게 됨.

key는 해당 엘리먼트에 고유성을 부여해주고 그 고유성을 비교하여 렌더링을 효과적으로 수행하는 것!

밑에 예시를 보며 이해해보자!

Sample code

<ul>
    <li>a</li>
	<li>b</li>
</ul>

<ul>
    <li>a</li>
	<li>b</li>
	<li>c</li>
</ul>

두 리스트를 순회하면서
이 둘을 비교하여 차이가 있으면 업데이트를 한다.

이 코드에서는 마지막 c자식만 추가하면 업데이트가 종료가 됨.

<ul>
    <li>a</li>
	<li>b</li>
</ul>

<ul>
    <li>c</li>
	<li>a</li>
	<li>b</li>
</ul>

하지만 위의 코드와는 다르게
마지막 요소가 변경된 것이 아니라 첫 번재 요소에 값이 추가된 경우에는 모든 자식을 변경한다.
위 코드와 비교했을때 굉장히 비효율임😥

그래서 이런 비효율적인 문제를 key값을 부여함으로써 해결할 수 있는것이다.

<ul>
    <li key = "first">a</li>
	<li key = "scond">b</li>
</ul>

<ul>
    <li key = "third">c</li>
	<li key = "first">a</li>
	<li key = "scond">b</li>
</ul>

key값을 가지고 있으면 기존의 값과 key를 비교하여 모든 값 갱신이 아닌 "third" key를 가진 엘리먼트만 추가한다.

💡 React에서는 Key값은 고유한 값으로 사용하는 것을 지향한다고 한다~
❗ React map에서 key는 같은 map형제에서 고유한 값 이어야 한다!

result

state.cart.map((a, i)=>
  <tr key={i}>
  	<td>{state.cart[i].id}</td>
    <td>{state.cart[i].name}</td>
    <td>{state.cart[i].count}</td>
    <td>안녕</td>
  </tr>
)

쨋든 첨에 오류났던 코드를 난 이런식으로 수정햇다 ㅎㅎ

📎 참고) React 공식문서