React에서 키가 중요한 이유와 성능을 향상시키는 방법

Source: Dev.to

키는 React에게 리스트 요소에 대한 안정적인 식별자를 제공하여, 조정 알고리즘이 렌더링 간에 요소를 올바르게 매칭하도록 합니다. 이를 통해 DOM 업데이트를 최소화하고, 컴포넌트 상태를 보존하며, 특히 동적인 리스트에서 성능을 향상시킵니다.

키가 해결하는 문제는 무엇인가요?

React는 이전 Virtual DOM과 다음 Virtual DOM을 비교하는 diffing(조정) 알고리즘을 사용합니다.

키가 없을 때, React는:

• 리스트 내 요소를 인덱스로 비교합니다.
• 실제로 변경되지 않은 요소라도 변경된 것으로 간주하여 불필요한 DOM 교체가 발생할 수 있습니다.

키가 있을 때, React는:

• 안정적인 식별자(키)로 요소를 추적합니다.
• 가능한 경우 기존 DOM 노드를 재사용하여 불필요한 파괴와 재생성을 방지합니다.

키가 어떻게 성능을 향상시키나요?

• 불필요한 DOM 업데이트 방지 – DOM 작업은 비용이 많이 들며, 키를 사용하면 변경되지 않은 항목에 대한 업데이트를 건너뛸 수 있습니다.
• 컴포넌트 상태 보존 – 키가 없으면 리스트가 변경될 때 입력 요소가 포커스나 값을 잃을 수 있지만, 키가 있으면 상태가 유지됩니다.
• 효율적인 재정렬 가능 – 드래그‑앤‑드롭 리스트, 정렬, 필터링 등에 유용합니다. React는 기존 노드를 파괴하지 않고 이동시킬 수 있습니다.