React의 key prop이 필요한 이유
콘솔에 다음과 같은 경고가 나타납니다: "Each child in a list should have a unique 'key' prop."
많은 개발자가 이 경고를 무시합니다. 하지만 이는 실수입니다. key prop은 단순한 경고가 아닙니다. 성능 향상과 버그 방지를 위한 도구입니다.
key prop은 어떤 역할을 하나요?
React는 리스트 아이템을 식별하기 위해 key를 사용합니다. 어떤 아이템이 변경되었는지, 이동했는지, 또는 삭제되었는지를 React에게 알려줍니다.
key가 없으면 React는 리스트 전체를 다시 렌더링해야 합니다. 이는 앱의 속도를 늦추고 데이터 버그를 유발합니다.
도서관 예시
1,000권의 책이 있는 도서관을 상상해 보세요. 중간에 새 책을 추가하려면, 공간을 만들기 위해 나머지 모든 책을 옮겨야 합니다.
React에서 key는 고유한 ID 역할을 합니다. 모든 요소에 정체성을 부여합니다. 재조정(reconciliation) 과정 동안 React는 새로운 리스트와 이전 리스트를 비교합니다.
key가 없을 때 발생하는 문제
key를 생략하면 React는 모든 아이템이 동일하다고 판단합니다. 만약 리스트 맨 앞에 아이템을 하나 추가하면, React는 리스트 전체가 변경되었다고 생각합니다. 그리고 DOM의 모든 요소를 다시 생성합니다. 이는 메모리와 CPU를 낭비하게 만듭니다.
인덱스(Index)의 함정
초보 개발자들은 종종 배열의 인덱스를 key로 사용합니다.
예시: key={index}
이는 동적인 리스트에서 위험합니다. 아이템을 정렬, 필터링 또는 삭제하면 인덱스가 변경됩니다. 이는 잘못된 UI 상태와 버그로 이어집니다.
Key 사용을 위한 권장 사항
- 데이터베이스의 안정적인 ID를 사용하세요 (예:
user.id). - 형제 요소들 사이에서 key가 고유하도록 하세요.
- key로
Math.random()을 사용하는 것을 피하세요. 렌더링할 때마다 값이 바뀌어 UI 깜빡임(flickering)을 유발합니다. - 데이터에 ID가 없다면, 데이터를 가져올 때
uuid나nanoid를 사용하여 생성하세요.
Key 선택 가이드
• Database ID: 가장 좋습니다. 매우 안정적이고 빠릅니다. • Array Index: 절대 변하지 않는 정적 리스트에만 사용하세요. • Math.random(): 피해야 합니다. 불필요한 재마운트(re-mount)를 강제합니다.
요약
좋은 key는 앱을 더 빠르게 만듭니다. 불필요한 재렌더링을 최대 40%까지 줄일 수 있습니다. 항상 안정적이고 고유한 식별자를 우선시하세요.