React의 재조정(Reconciliation) 과정에서 key가 왜 중요한가요?

React는 key로 리스트 항목의 동일성을 판단합니다. 안정적인 key가 없으면 순서 변경 시 잘못된 컴포넌트 상태가 재사용될 수 있으므로 데이터의 고유 ID를 사용하는 것이 좋습니다.

핵심 개념

핵심 기준은 리스트 항목의 동일성 판단입니다. 이 개념은 단순한 용어가 아니라, 실제 코드나 시스템에서 반복적으로 생기는 문제를 다루기 위해 등장했습니다.

React에서는 상태 변화가 렌더링으로 이어지는 흐름을 예측 가능하게 만드는 것이 중요합니다. 컴포넌트 경계와 렌더링 비용을 이해하면 더 부드러운 UI를 만들 수 있습니다.

동작 흐름

1. 먼저 어떤 문제가 있는지 확인합니다.
2. 이 개념이 그 문제를 어떤 기준으로 나누거나 해결하는지 봅니다.
3. 실제 코드에서는 입력, 상태, 실행 순서, 비용이 어떻게 바뀌는지 확인합니다.
4. 마지막으로 한계와 부작용을 함께 점검합니다.

실제 예시

{todos.map((todo) => (
  <TodoItem key={todo.id} todo={todo} />
))}

// index를 key로 쓰면 정렬/삭제 시 기존 상태가 다른 항목에 붙을 수 있습니다.

key는 React가 “같은 항목인지” 판단하는 기준입니다. 화면에 보이는 순서가 아니라 데이터의 고유성을 기준으로 잡아야 합니다.

실무에서 주의할 점

• 상태를 너무 위로 올리면 불필요한 렌더링 범위가 커집니다.
• memoization은 병목이 확인된 곳에 쓰는 편이 좋습니다.
• 사용자 입력, 로딩, 에러 상태를 함께 설계해야 실제 화면이 안정적입니다.

함께 연결해서 보면 좋은 키워드

React, Reconciliation, key, 렌더링

정리

한 줄로 정리하면, React는 key로 리스트 항목의 동일성을 판단합니다. 안정적인 key가 없으면 순서 변경 시 잘못된 컴포넌트 상태가 재사용될 수 있으므로 데이터의 고유 ID를 사용하는 것이 좋습니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.

React key가 중요한 이유

React 재조정 과정에서 key는 “이전 렌더의 어떤 요소가 다음 렌더의 어떤 요소와 같은가”를 판단하는 힌트입니다. key가 안정적이지 않으면 상태가 엉뚱한 항목에 붙거나 불필요한 재생성이 발생합니다.

{todos.map((todo) => (
  <TodoItem key={todo.id} todo={todo} />
))}

index key의 문제

{todos.map((todo, index) => (
  <TodoItem key={index} todo={todo} />
))}

목록 앞에 항목이 추가되면 기존 항목들의 index가 바뀌어 React가 다른 항목으로 오해할 수 있습니다. 입력 중인 값, focus, 애니메이션 상태가 뒤섞이는 버그가 생깁니다.

좋은 key 조건

• 같은 목록 안에서 유일해야 합니다.
• 렌더 사이에 안정적이어야 합니다.
• 가능하면 서버 ID나 도메인 ID를 사용합니다.
• 랜덤 값(Math.random())은 매 렌더마다 바뀌므로 피합니다.