리액트에서 `key`에 `index`를 넣으면 안 되는 이유

리액트에서 `key`는 리스트의 각 항목을 고유하게 식별하기 위한 속성이다. 이 `key`는 리액트가 DOM을 효율적으로 업데이트하는 데 중요한 역할을 한다. 하지만 리스트 렌더링 시 `index`를 `key`로 사용하는 것은 권장되지 않는다.  이 글에서 그 이유와 다른 대안을 설명하겠다.

 `key`의 역할

리액트는 컴포넌트 리스트를 렌더링할 때, 각 항목을 추적하기 위해 `key`를 사용한다. `key`는 리액트가 어떤 항목이 변경, 추가, 또는 제거되었는지 식별하는 데 도움을 준다. 만약 `key`가 없거나 적절하지 않다면, 리액트는 변경 사항을 제대로 감지하지 못해 불필요한 렌더링을 하거나 오류가 발생할 수 있다.

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

위 코드에서 `index`를 `key`로 사용했지만, 이는 문제를 일으킬 수 있다.

 

`index`를 `key`로 사용하면 안 되는 이유

 

1. 리스트의 순서가 변경될 때 문제 발생

리스트가 변경되거나 정렬될 경우, `index`는 변동될 수 있다. 예를 들어, 새로운 항목이 리스트 중간에 추가되면 기존 항목들의 인덱스가 변경된다. 리액트는 `index`를 `key`로 사용하면 각 항목이 단순히 위치가 바뀐 것인지, 아니면 실제로 다른 항목으로 교체된 것인지 구분하지 못한다. 이로 인해 기존 항목이 새 항목으로 잘못 인식되거나, 불필요한 컴포넌트 재렌더링이 발생할 수 있다.

2. 성능 문제  
   `index`를 `key`로 사용하면 리액트는 리스트의 순서가 바뀔 때마다 모든 항목을 다시 렌더링해야 한다. 이로 인해 성능 저하가 발생할 수 있다. 특히 리스트가 클수록 그 영향은 더 커진다.

3. 컴포넌트 상태 유지 문제
   `key`는 컴포넌트의 상태를 유지하는 데도 영향을 미친다. 예를 들어, 입력 필드를 가진 컴포넌트 리스트가 있다고 하자. 각 컴포넌트의 상태(입력된 값)는 `key`에 따라 관리된다. `index`가 변하면 리액트는 컴포넌트를 다른 항목으로 인식하여 상태를 잃어버리게 된다.

올바른 `key` 사용법

`key`로는 리스트의 각 항목이 고유하게 식별될 수 있는 값(예: 데이터베이스의 ID)을 사용하는 것이 가장 좋다. 고유한 ID가 없다면, 직접 생성하거나 리스트 항목 자체를 `key`로 사용하는 것도 방법이다.

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

이렇게 하면 리스트가 변경되어도 항목들은 고유한 `key`로 인해 정확히 식별되며, 리액트는 불필요한 재렌더링을 하지 않는다.

결론
리액트에서 `key`는 리스트 항목을 고유하게 식별하기 위한 중요한 요소다. `index`를 `key`로 사용하는 것은 순서 변경이나 성능 저하, 상태 관리 문제를 일으킬 수 있기 때문에 고유한 값으로 `key`를 설정하는 것이 바람직하다.