React에서 리스트를 렌더링할 때 key는 각 요소를 고유하게 식별하는 필수 속성입니다. key는 React가 DOM 업데이트를 효율적으로 수행하도록 돕지만, 잘못된 key 사용은 성능 저하와 버그를 초래합니다. 특히, 배열의 인덱스를 key로 사용하는 것은 피해야 합니다. 이 글에서는 인덱스를 key로 사용하면 안 되는 이유와 올바른 key 선택 방법을 설명합니다.
왜 인덱스를 key로 사용하면 안 되나요?
순서 변경 시 재렌더링 문제
순서 변경 시 재렌더링 문제리스트에 요소가 추가, 삭제, 또는 순서가 바뀌면 인덱스가 변경됩니다. React는 key가 바뀐 요소를 새로운 요소로 인식해 불필요한 재렌더링을 수행합니다.
- 예시: [Apple, Banana, Orange] 리스트에서 Mango를 맨 앞에 추가하면 인덱스가 [0, 1, 2]에서 [0, 1, 2, 3]으로 바뀝니다. React는 모든 요소를 새로 렌더링합니다.
상태 관리 문제
상태 관리 문제상태를 가진 컴포넌트(예: 입력 폼)가 있는 리스트에서 인덱스를 key로 사용하면, 순서 변경 시 상태가 엉뚱한 요소에 연결됩니다.
- 예시: 사용자가 Banana 입력란에 텍스트를 입력했는데, 리스트 순서가 바뀌면 입력값이 다른 항목(예: Apple)에 표시될 수 있습니다.
성능 저하
성능 저하React는 key를 통해 DOM 변경을 최소화하지만, 인덱스를 사용하면 최적화가 제대로 이루어지지 않아 성능이 떨어집니다.
언제 인덱스를 사용해도 괜찮을까요?
인덱스를 key로 사용하는 것은 다음 경우에만 적합합니다:
- 리스트가 정적이고 순서가 절대 바뀌지 않을 때.
- 요소가 상태나 이벤트 핸들러를 가지지 않을 때.
const staticItems = ['Apple', 'Banana', 'Orange'];
const list = staticItems.map((item, index) => <li key={index}>{item}</li>);하지만 이런 경우에도 고유한 값을 사용하는 것이 더 안전하고 유지보수에 유리합니다.
올바른 key 값 선택 방법
key는 리스트 내에서 고유하고 안정적인 값을 사용해야 합니다.
- 데이터베이스 ID데이터베이스의 고유 ID(예: UUID, _id, Primary Key)를 사용합니다.
- UUID 생성uuid 라이브러리로 클라이언트에서 고유 ID를 생성합니다.
- 복합 키고유한 단일 값이 없을 때 여러 속성을 조합합니다.
- 해시 함수데이터 속성을 기반으로 해시 값을 생성합니다(충돌 가능성 주의).
key 선택 시 주의사항
안정성
key는 리스트 업데이트 시 동일해야 합니다. Math.random() 같은 임시 값은 절대 사용하지 마세요.
고유성
리스트 내에서 중복되지 않아야 합니다.
간단함
복잡한 연산으로 key를 생성하면 성능에 영향을 줄 수 있습니다.
정리
React에서 인덱스를 key로 사용하면 안 되는 이유는 다음과 같습니다:
-
재렌더링 문제: 리스트 순서가 바뀌면 인덱스가 변경되어 React가 모든 요소를 불필요하게 재렌더링합니다.
-
상태 관리 문제: 상태를 가진 컴포넌트에서 순서 변경 시 상태가 잘못된 요소에 연결됩니다. 예를 들어, 입력 폼에서 사용자가 입력한 값이 엉뚱한 항목에 표시될 수 있습니다.
-
성능 저하: 인덱스는 React의 DOM 최적화를 방해하여 성능을 떨어뜨립니다.
대신, 데이터베이스 ID, UUID, 또는 복합 키 같은 고유하고 안정적인 값을 key로 사용해야 합니다. 이를 통해 렌더링 효율성을 높이고, 상태 관리 문제를 방지하며, 유지보수성을 개선할 수 있습니다. 인덱스는 리스트가 정적이고 상태가 없는 경우에만 제한적으로 사용할 수 있지만, 고유한 값을 사용하는 것이 항상 더 안전한 선택입니다.
