Key는 왜 쓰는 걸까?

• React가 리스트의 각 항목을 추적하는 데 사용하는 고유 식별
• 키 존재한다는 뜻은 → 랜더링해도 DOM에 해당 컴포넌트가 존재한다는 것.
• 컴포넌트의 키가 변경된다면 같은 위상, 같은 데이터여도 다시 랜더링된다.
• 리스트에서 key를 추가하라고 하는 이유
  • 리스트에 새롭게 그려질때마다 같은 위상을 가지므로 모든게 매번 새롭게 그려짐 → 퍼포먼스 저하

<ul>
	<LIST key={}/>  << 키가 없다면 하나만 바뀌어도 모두가 바뀌게 됨.
	<LIST key={}/>
	<LIST key={}/>
<ul/>

 

• key를 추가하면, 새롭게 그려진건 key값이 변화하기 전까지 새로 그려지지 않고 그대로 유지
• key값을 가진 데이터를 리셋시키고 싶다면 키를 지우는게 아닌 새로운 키 값으로 변경시켜줘야한다.

 

매번 새롭게 그려지는걸 막고 싶다면, (기존 데이터를 이용하고 싶다면)

key를 써서 해당 부분이 다시 랜더링되는걸 고려해보면 좋을 것 같다.