[React] 배열 렌더링 시 key가 필요한 이유

React에서 배열을 렌더링할 때 key prop을 설정하는 것은 성능 최적화와 애플리케이션의 안정성을 위해 매우 중요하다.

React에서 배열 렌더링 시 key가 필요한 이유

React는 상태가 변경될 때 새로운 가상 DOM을 생성하고, 이전 가상 DOM과 비교하여 실제 DOM에 반영할 변경 사항을 찾는 재조정 과정을 거친다. 이때 key는 어떤 항목이 변경, 추가, 혹은 삭제되었는지 React가 빠르고 정확하게 식별하도록 돕는 역할을 한다.

• 효율적인 렌더링 (성능 최적화): key가 없으면 React는 리스트의 요소를 위에서부터 아래로 순차적으로 비교하며 모든 항목을 업데이트하려 시도한다. 하지만 고유한 key가 주어지면, React는 기존 트리와 새로운 트리의 key를 매칭하여 실제로 변경된 항목만 찾아내어 DOM을 최소한으로 조작한다.
• 컴포넌트 상태(State) 유지: 리스트 항목들의 순서가 바뀌거나 중간에 새로운 항목이 추가/삭제될 때, React는 key를 기준으로 컴포넌트 인스턴스를 유지한다. key가 없으면 컴포넌트가 가지고 있던 내부 상태(예: 입력 필드의 텍스트, 체크박스의 체크 여부 등)가 엉뚱한 요소에 매칭되어 UI 버그가 발생할 수 있다.

---

key 설정 시 주의할 점

1. 배열의 인덱스(Index)를 key로 사용하지 않기

가장 흔히 발생하는 실수 중 하나다. map((item, index) => ...)에서 제공하는 index를 key로 사용하면 배열의 순서가 변경될 때 문제가 발생한다.

• 문제점: 항목이 맨 앞이나 중간에 추가/삭제되거나 정렬이 바뀌면, 요소들이 가진 데이터는 그대로지만 부여되는 index는 변경된다. React는 인덱스를 기준으로 기존 컴포넌트를 재사용하려 하기 때문에, 컴포넌트의 상태가 의도치 않은 다른 데이터에 덮어씌워지는 치명적인 버그가 발생한다.
• 예외 사항: 리스트가 정적(추가, 삭제, 재정렬 없음)이고, 각 항목이 고유한 ID를 가지고 있지 않으며, 항목 컴포넌트가 내부 상태(State)를 가지지 않을 때만 최후의 수단으로 인덱스를 사용할 수 있다.

2. 안정적인(Stable) 값을 사용하기

렌더링될 때마다 값이 변하는 데이터(예: Math.random(), Date.now() 또는 렌더링 단계에서 호출되는 uuid())를 key로 사용해서는 안 된다.

• 문제점: 매 렌더링마다 key가 변경되면, React는 해당 요소가 완전히 새로운 요소라고 판단한다. 결과적으로 기존 DOM을 재사용하지 못하고 매번 항목을 삭제(Unmount)한 뒤 다시 생성(Mount)하게 되어 심각한 성능 저하를 일으키며, 컴포넌트가 가진 모든 상태와 포커스(Focus)를 잃게 된다.

3. 형제 노드 사이에서 고유(Unique)해야 함

key 값이 전역적으로 고유할 필요는 없지만, 같은 배열을 순회하여 렌더링되는 형제 요소들 사이에서는 반드시 고유해야 한다. 중복된 key가 존재하면 React가 어떤 요소를 업데이트해야 할지 혼동하여 렌더링 오류를 발생시킨다.

💡 권장하는 key 설정 방법
데이터베이스에서 가져온 고유한 식별자 (예: item.id, user.uuid 등)를 데이터 자체에 포함시켜 key로 사용하는 것이 가장 안전하고 이상적인 방법이다.