[React] React key 사용 이유

Each child in an array should have a unique “key” prop.

react 개발을 하다보면 한번씩 해당 경고를 마주한적이 있을것이다. 왜 배열을 사용할때 혹은 그 외에 상황에서 항상 key를 넣지 않았다고 경고 하는걸까? key의 역할이 뭘까?

key를 넣지 않으면?

virtualDOM과 DOM 비교과정에서 노드의 자식을 재귀적으로 처리할때 비효율적으로 처리된다

어떤말인지 모르겠다면 하단 포스팅의 Diffing Algorithm부분을 간단히 읽어보면 이해가 갈것이다

[React] React에서 DOM 렌더링 하는 방법

간단한 예시로 list에서 요소를 맨 마지막이 아닌 맨 앞에 삽입할 경우 새로운 요소를 삽입하고 끝!이 아닌 새로운 요소의 종속트리는 그대로 유지하되 다른 하위 자식들을 모두 업데이트 한다. (굴러온돌이 박힌돌 빼낸다 하나를 바꿨는데 줄줄히 상태를 업데이트 하게 되는것이다)

Key의 역할

자식들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인한다

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

React는 위와같은 예시에서 원래는 Connecticut이외에도 Duke, Villanova까지 업데이트를 진행했을것이다. 하지만 고유의 key를 부여해주어 '2014'key를 가진 엘리먼트가 새로 추가되었고, '2015'와 '2016' key를 가진 엘리먼트는 이동만 하면 되는 것을 알 수 있다.

배열에서 Key 사용하기

react에서 보통 같은 컴포넌트를 여러번 쓰고싶을때 map() 함수를 사용한다. 이때 보통 key에 index를 넣어 사용하는 경우가 많을 것이다

const examples = exampleList.map((item:exmaple,index:number)=>{
     <li key={index}>
    {item.name}
  </li>
})

이러한 경우 항목의 순서 즉 정렬이 바뀌는 경우가 아니라면 상관없지만 정렬이 바뀌는 경우 state가 적절히 변경되지 못한다거나 key-value쌍이 적절히 변경되지 못한다는 문제가 생길 수 있다.

혹은 인덱스를 기준으로 렌더링 되고있던 코드는 적절하지 못한 인덱스로 인해 key를 사용하지 않았을때처럼 전체가 리렌더링되는등의 문제가 발생할 수 있다.

react 공식 문서에서 관련 예시코드를 제공하고 있다

index를 key값으로 사용하였을때의 문제