React에서 키는 React가 어떤 아이템이 변경,추가 또는 삭제되었는 지를 인식하는 데 도움을 준다. 예를 들어 유도억인 데이터를 다룰 때 아이템을 새로 생성하거나 제거, 변경 할 수 있는데 key가 없으면 가상dom을 비교하는 과정에서 리스트를 순차적으로 비교하며 변화를 감지한다.
다음의 예제를 보면 이해가 쉽다.
// 처음 상태
<ul>
<li>min</li>
<li>jung</li>
</ul>
// 렌더링 후 상태 (마지막에 mniminmin 엘리먼트 추가)
<ul>
<li>min</li>
<li>jung</li>
<li>choi</li>
</ul>DOM 노드의 자식들을 재귀적으로 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 그 부분을 생성한다.
위에 코드를 보면 마지막에 choi을 추가했을 때 이전 상태의 min,jung까지 동일함을 확인하고, choi를 추가하는 방식으로 동작한다.
// 처음 상태
<ul>
<li>min</li>
<li>jung</li>
</ul>
// 렌더링 후 상태 (마지막에 mniminmin 엘리먼트 추가)
<ul>
<li>choi</li>
<li>min</li>
<li>jung</li>
</ul>이 리스트의 맨 앞에 요소를 추가한다고 생각하면, 리액트는 맨 앞 요소를 비교한 후 min 과 choi가 다르기때문에 다르다고 인식해 모든 요소를 새로 생성하니 매우 비효율적으로 동작한다는 걸 알 수 있다.
하지만 key가 있다면 어떤 변화가 일어났는지 이 key의 비교를 통해 빠르게 알아낼 수 있다.
Key값 설정
key값을 설정할땐 항상 고유한 값으로 설정해야한다.
map의 인자로 전되는 함수 내부에서 컴포넌트 props를 설정하듯 설정하면된다.
요소에 안정적인 ID를 제공하려면 배열 내부 요소에 키를 주어야 한다.
const post = save.map((value, index) => ( <Comment nickname={index} comment={value} />)
위처럼 react에서는 배열을 순회회면서 key값을 가지고 있지않으면 각 요소는 key라는 유일한 prop값을 가져야 한다는 경고가 뜬다. key가 없다면 리액트는 자식 요소의 변동을 감지하고 렌더링 할 때 비효율적으로 작동하게 된다.
const post = save.map((value, index) => ( <Comment key={value + index} nickname={index} comment={value} />)위처럼 key값을 추가하게 되면 에러가 사라지는것을 볼 수 있다.
- key값에 index값을 주는 것을 지양해야 하는 이유는 데이터가 삽입, 삭제되는 경우 다음으로 들어오는 index번호가 같을 수 있기때문에 그렇게 되면 값이 변해도 key값이 같기때문에 변경 수정이 안될수도있다. 그렇기 때문에 데이터의 유일한 값을 key 값으로 전달해야 한다.
