React에서 다른 요소들 사이의 고유한 키(Uniqueness)

소개

React는 사용자 인터페이스를 만들기 위한 인기있는 JavaScript 라이브러리입니다. React를 사용할 때, 키(key)의 개념과 다른 요소들 사이에서의 고유성을 이해하는 것이 중요합니다. 이 블로그 포스트에서는 같은 키를 가진 두 개의 <span> 요소가 서로 다른 상위 요소(parent elements)를 가지고 있는 코드 스니펫이 React에서 고유한 것으로 간주되는지에 대해 알아보겠습니다.

React 키(Key) 이해하기

React에서 키는 조정(reconciliation) 프로세스에서 중요한 역할을 합니다. 조정기(reconciler)는 DOM을 효율적으로 업데이트하는 방법을 결정할 때 키를 사용합니다. 키는 렌더링 사이에서 형제 노드들 안에서 특히 같은 계층 내에서 노드를 식별하기 위해 사용됩니다. React는 키를 렌더링 사이에서 비교함으로써, 이전 렌더링에서 노드가 이미 존재하는지 여부를 파악할 수 있고, 더 효율적인 업데이트를 수행할 수 있습니다.

다음 예시를 살펴보겠습니다:

// 렌더 A
<div class='parent'>
  <div>one</div>
</div>

// 렌더 B
<div class='parent'>
  <div>two</div>
  <div>one</div>
</div>

두 번째 렌더에서, 키를 사용하지 않으면 React는 <div>one</div>이 변경되었는지 아니면 그 앞에 <div>two</div>를 추가하기만 해야 하는지 알 수 없게 됩니다. 그러나 만약 <div>one</div>에 키를 할당하고 렌더 사이에서 키를 비교하면, React는 이미 존재했음을 판단하고 그 앞에 <div>two</div>를 추가하기만 하면 됩니다.

키는 형제 노드들 중에서만 고유해야 하며, 전역적으로 고유할 필요는 없다는 점에 주의해야 합니다.

제공된 코드는 고유한지?

이제, 제공된 코드 스니펫에 대해 살펴보겠습니다.

<span>
  {someArray.map(function (a, index) {
    return (
      <span key={index}>{a}</span>
    );
  })}
</span>

<span>
  {someArray2.map(function (a, index) {
    return (
    <span key={index}>{a}</span>
    );
  })}
</span>

이 경우, 루프 내부의 두 개의 <span> 요소는 같은 키를 가지지만, 서로 다른 상위 요소의 자식입니다. 그러나 React에서는 그래도 고유하게 간주됩니다. 왜냐하면 키의 고유성은 형제 노드들 사이에서만 요구되기 때문입니다.

올바른 키 선택의 중요성

코드 스니펫은 기술적으로는 맞지만, 배열을 사용할 때 올바른 키를 선택하는 것이 매우 중요합니다. 이 경우, 배열의 인덱스를 키로 사용하는 것은 요소의 순서가 변경될 경우 잠재적인 문제를 일으킬 수 있습니다.

대신에 요소의 고유 식별자인 ID를 키로 사용하는 것을 권장합니다. 다음 코드를 고려해 보겠습니다:

{someArray.map(function (element) {
  return (
    <span key={element.id}>{element.name}</span>
  );
})}

각 요소의 고유한 ID를 키로 사용함으로써, React가 구성요소를 정확하게 식별하고 효율적으로 업데이트할 수 있도록 보장할 수 있습니다.

React 문서는 이미 고유한 ID가 없는 경우에는, 모델에 새로운 ID 속성을 추가하거나 콘텐츠의 일부를 해싱함으로써 고유한 ID를 생성하는 것을 제안합니다.

결론

결론적으로, 제공된 코드 스니펫은 React에서 고유한 키를 가지고 있다고 할 수 있습니다. 키의 고유성은 형제 노드들 사이에서만 요구됩니다. 그러나 요소의 순서가 변경되어도 유지되는 올바른 키를 선택하는 것이 중요합니다. 요소의 고유 식별자인 ID와 같은 고유한 식별자를 사용함으로써 React 컴포넌트 내에서 효율적인 업데이트를 보장할 수 있습니다.

참고 자료 : 

reactjs