Why You Need the React Key Prop
콘솔에 다음과 같은 에러가 표시됩니다: "Each child in a list should have a unique 'key' prop."
많은 개발자들이 이 에러를 무시하곤 합니다. 하지만 이는 실수입니다. 이 경고는 성능 문제와 잠재적인 버그에 대해 알려줍니다.
What is a key prop?
key는 React가 리스트 내의 특정 항목을 식별할 수 있도록 도와줍니다. 어떤 항목이 변경되었는지, 이동했는지, 또는 삭제되었는지를 React에 알려주는 역할을 합니다. key가 없으면 React는 무언가 변경될 때마다 리스트 전체를 다시 렌더링합니다. 이는 앱의 성능을 저하시킵니다.
1,000권의 책이 있는 도서관을 생각해 보세요. 중간에 새 책을 추가하려면 공간을 만들기 위해 다른 모든 책을 옮겨야 합니다. key는 각 책의 고유 ID와 같습니다. 이를 통해 React는 다른 모든 것을 옮기지 않고도 정확한 위치를 찾을 수 있습니다.
The Reconciliation Process
React는 새로운 Virtual DOM과 이전 DOM을 비교하기 위해 diffing 알고리즘을 사용합니다.
- 상태(State)가 변경됩니다.
- React가 새로운 트리를 구축합니다.
- React가
key를 사용하여 트리를 비교합니다. - React가 변경된 요소만 업데이트합니다.
The common mistake: Using array index as a key.
리스트가 변경되는 경우 절대 key={index}를 사용하지 마세요. 항목을 추가하거나 삭제하면 모든 항목의 인덱스가 바뀝니다. React는 혼란을 겪게 되고, 실제로 변경되지 않은 항목까지 다시 렌더링하게 됩니다. 이는 메모리를 낭비하고 UI 버그를 유발합니다.
How to fix it:
- 데이터베이스의 안정적인 ID를 사용하세요 (예:
user.id). - 데이터에 ID가 없다면
uuid와 같은 고유한 문자열을 사용하세요. key로Math.random()을 사용하는 것은 피하세요. 렌더링할 때마다 새로운 ID를 생성하므로 컴포넌트가 강제로 재마운트(re-mount)되어 UI 깜빡임 현상이 발생합니다.
Best practices:
- Keys must be stable. (Key는 안정적이어야 합니다.)
- Keys must be unique among siblings. (Key는 형제 요소들 사이에서 고유해야 합니다.)
- Use database IDs for the best performance. (최고의 성능을 위해 데이터베이스 ID를 사용하세요.)
Key Comparison Table:
• Database ID: 권장됨. 안정적이고 빠름. • Array Index: 권장하지 않음. 정렬이나 필터링 시 버그를 유발함. • Math.random(): 피해야 함. 불필요한 재마운트를 유발함.
Summary for your workflow:
이 에러가 보인다면 컴포넌트에 영구적인 식별자가 없다는 뜻입니다. API 응답에서 email이나 ID와 같은 고유 필드가 있는지 확인하세요. 이를 수정하면 불필요한 재렌더링을 30-40% 줄일 수 있습니다.