React

왜 React 에서는 Key를 써야하나요?

iseolin 2023. 3. 9. 18:13

우리는 공식문서에서부터 list를 렌더링 시킬 경우 key를 명시하라고 배웁니다.
근데 왜??? 어째서??? key를 명시해야할까요?

Key

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.
key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.
- React 공식문서 -

 

우리는 공식문서에서 Key에 대한 설명을 찾을 수 있습니다.
그렇다면, React는 어떠한 이유로 Key를 사용할까요??

재조정 (Reconciliation)

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

자식의 끝에 Element를 추가하는 경우

예를 들어 자식의 끝에 Element를 추가하는 경우, 변경사항이 감지되었으니 변경을 생성할 것입니다.

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

// 후
<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li> // 변경 감지!
</ul>

하지만 위와 같은 단순함엔 치명적인 문제점이 있습니다.

자식의 맨 앞에 Element를 추가하는 경우

자식의 처음에 Element를 추가하는 경우, 모든 자식을 변경하게 될 것입니다.
이는 성능에 영향을 미치게 됩니다.

// 전
<ul>
  <li>second</li>
  <li>third</li>
</ul>

// 후
<ul>
  <li>first</li> // 변경 감지!
  <li>second</li> // 변경 감지!
  <li>third</li> // 변경 감지!
</ul>

Key를 사용하자.

이러한 문제를 해결하기 위해서는 어떤 방법이 있을까요?
Element를 구별할 수 있는 고유한 무언가를 부여한다면, 그렇게 전과 비교할 수 있다면 훨씬 효율적으로 동작할 수 있지 않을까요?

React는 이 때 Key 를 택했습니다.
자식들이 key를 가지고 있다면, Key를 통해 기존 트리와 이후 트리의 자식이 일치하는 지 확인합니다.
이로써 새로운 Element 구별만이 아닌, 기존에 있던 Element를 감지할 수 있게 되었습니다.

// 전
<ul>
  <li key="second">second</li>
  <li key="third">third</li>
</ul>

// 후
<ul>
  <li key="first">first</li> // 새로운 구성요소 감지(기존에 없던 키)
  <li key="second">second</li> // 이동
  <li key="third">third</li> // 이동
</ul>

유의점

  1. key는 배열 문맥에서만 유일하면 됩니다.
  2. 배열의 인덱스를 key로 사용하는 경우, 문제가 발생할 가능성이 있습니다.

인덱스를 key로 사용하면, 항목의 순서가 바뀌었을 때 key 또한 바뀔 것입니다.
그 결과로, 컴포넌트의 state가 엉망이 되거나 의도하지 않은 방식으로 바뀔 수도 있습니다.
- React 공식문서 -

 

댓글수0