[TIL] React에서 key가 필요한 이유가 뭘까?

DOM 노드의 자식들을 재귀적으로 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경을 생성한다.

<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

 

위처럼 단순하게 구현하면 리스트의 맨 앞에 엘리먼트를 추가하는 경우 성능이 좋지 않다.

React는 <li>Duke</li>와 <li>Villanova</li> 종속 트리를 그대로 유지하는 대신 모든 자식을 변경한다. 이러한 비효율은 문제가 될 수 있다.

 

이를 해결하기 위해  key 속성을 지원합니다. 자식들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인한다. 예를 들어, 위 비효율적인 예시에 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>

// 또는

<li key={item.id}>{item.name}</li>

 

key값으로 index를 사용할 수도 있는데 항목들이 재배열되지 않는다면 괜찮은 방법이지만 재배열되는 경우 오류가 날 가능성이 크다.

컴포넌트 인스턴스는 key를 기반으로 갱신되고 재사용된다. 인덱스를 key로 사용하면, 항목의 순서가 바뀌었을 때 key 또한 바뀔 것이다. 그 결과 컴포넌트의 state가 엉망이 되거나 의도하지 않은 방식으로 바뀔 수 있다.

다시 정리하면 key는 리액트가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key는 엘리먼트에 안정적인 고유성을 부여하여 배열 내부의 엘리먼트에 지정된다. 

 

참고사이트

https://ko.legacy.reactjs.org/docs/reconciliation.html#recursing-on-children

재조정 (Reconciliation) – React