[면접공부] 리액트에서 index를 key값으로 사용하면 안되는 이유

리액트(React)에서 index를 key 값으로 사용하는건 비추천되고있다.
그 이유에 대해 알아보자.

1. Key의 역할

• Key는 리액트가 각 요소를 고유하게 식별할 수 있도록 도와주는 속성
• 리액트는 key를 사용하여 요소의 변경, 추가, 삭제 여부를 효율적으로 파악함
• 효율적인 비교를 통해 DOM 업데이트를 최소화, 성능을 최적화

2. Index를 key로 사용하면 안 되는 이유

1) 요소의 순서 변경 시 문제 발생

• 배열의 요소가 추가되거나 삭제될 때, index는 순서에 따라 변하기 때문에 같은 요소에 대한 key가 변경될 수 있다.
• 리액트는 key 값이 바뀌면 요소를 새로운 요소로 인식하여 불필요한 DOM 업데이트가 발생할 수 있다.

예시

const items = ['Apple', 'Banana', 'Cherry'];
 
items.map((item, index) => <li key={index}>{item}</li>);

• 만약 배열에 Grapes가 첫 번째로 추가되면, 이전의 Apple이 두 번째로 밀려나고 index가 바뀐다.
• 리액트는 Apple을 다른 위치로 이동하지 않고 기존 요소를 제거하고 새로운 요소를 렌더링한다. 이는 비효율적인 DOM 조작작임

2) 사용자 입력과 같은 상태 손실 가능성

• 만약 리스트의 각 항목에 사용자 입력 필드가 있고 index를 key로 사용한다면, 항목 추가/삭제 시 입력한 데이터가 유지되지 않을 수 있다. 리액트는 요소가 새로 생성된 것으로 간주하여 입력 상태를 초기화한다.

3. 언제 index를 사용해도 괜찮은가?

• key가 정말로 변하지 않는 정적 리스트(요소 추가/삭제가 없고 렌더링이 단 한 번만)인 경우에는 index를 사용할 수 있다.
• 예를 들어, 리스트가 고정된 짧은 데이터를 다루는 경우에 한해 사용할 수 있다.

4. 적절한 key 사용 예시

1. 고유한 식별자가 있는 데이터

   const items = [{ id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }];
   items.map((item) => <li key={item.id}>{item.name}</li>);

2. 데이터의 고유 속성을 key로 활용

   data.map((user) => <div key={user.username}>{user.name}</div>);

결론

index를 key로 사용하면 요소 식별 문제와 불필요한 리렌더링이 발생할 수 있기 때문에, 가능하면 고유한 식별자를 key로 사용해야 한다.