React 리스트와 Key 마스터하기
React에서 리스트를 렌더링하는 것은 간단하지만, 올바르게 구현하는 것은 어렵습니다.
많은 개발자들이 배열의 인덱스를 key로 사용합니다. 이는 실수입니다. 이는 버그를 유발하고 성능을 저하시킵니다.
React에서 동적 데이터를 처리하는 올바른 방법은 다음과 같습니다.
React가 리스트를 사용하는 방식
React는 map() 메서드를 사용하여 배열을 UI 요소로 변환합니다. map()을 사용하면 React는 각 데이터를 컴포넌트로 변환합니다.
Key의 역할
React는 Virtual DOM을 사용합니다. 데이터가 변경되면 React는 새로운 데이터와 이전 데이터를 비교합니다. 이 과정을 reconciliation(재조정)이라고 합니다.
Key는 고유 식별자 역할을 합니다. Key는 React에게 어떤 항목이 변경되었는지, 이동했는지, 또는 삭제되었는지를 정확하게 알려줍니다.
인덱스를 Key로 사용하는 것이 위험한 이유
인덱스(0, 1, 2...)를 key로 사용하면 세 가지 주요 문제가 발생합니다.
- 컴포넌트 상태 오류: 리스트를 정렬하면 입력 필드나 체크박스가 잘못된 항목의 데이터를 표시할 수 있습니다.
- 성능 저하: React가 어떤 항목이 무엇인지 추적할 수 없습니다. 이로 인해 단 하나의 항목만 렌더링하는 대신 리스트 전체를 다시 렌더링하는 경우가 많습니다.
- 시각적 버그: UI는 올바르게 보일 수 있지만, 항목의 위치가 바뀔 때 내부 로직이 실패할 수 있습니다.
Key를 사용하는 올바른 방법
앱을 빠르고 안정적으로 유지하려면 다음 규칙을 따르세요.
- 고유 ID 사용: 항상 데이터베이스의 ID(UUID 또는 primary key와 같은)를 사용하세요.
Math.random()사용 금지: 렌더링 중에 key를 생성하면 업데이트가 일어날 때마다 React가 모든 요소를 다시 생성하게 됩니다. 이는 성능을 심각하게 저하시킵니다.- Key의 안정성 유지: Key는 동일한 데이터에 대해 전체 생명주기 동안 동일하게 유지되어야 합니다.
한눈에 보는 비교
특징: 안정성 인덱스 사용: 불안정함 고유 ID 사용: 매우 안정적임
특징: 성능 인덱스 사용: 낮음 고유 ID 사용: 최적
특징: 상태 안전성 인덱스 사용: 안전하지 않음 고유 ID 사용: 100% 안전함
개발자를 위한 요약
map() 메서드를 사용하세요. key prop에 고유하고 안정적인 ID를 전달하세요. 변경, 정렬 또는 필터링이 가능한 리스트에는 배열 인덱스를 사용하지 마세요.