[key] 리액트에서 key로 index를 쓰면 안 되는 이유

key 

React에서 리스트를 렌더링할 때 map() 을 자주 사용하며, key prop을 지정하는 것이 필수입니다. 많은 초보 개발자들이 편의상 key={index} 를 사용하는데, 이는 잠재적인 버그와 성능 문제를 일으킬 수 있습니다. 이 글에서는 왜 key로 인덱스를 사용하면 안 되는지, 어떤 경우에 문제가 발생하는지, 그리고 올바른 key 지정 방법까지 자세히 설명합니다.

 

---

1.  key란 무엇인가?

React는 리스트를 렌더링할 때 각 요소의 변경 여부를 추적해야 합니다. 이때 key는 React가 어떤 아이템이 변경, 추가, 삭제되었는지 효율적으로 파악할 수 있도록 도와주는 고유 식별자입니다.

const list = ['apple', 'banana', 'cherry'];
list.map((item, index) => (
  <li key={index}>{item}</li>
));

• 위 코드에서 key는 index이지만, 이 방식에는 함정이 숨어 있습니다.

 

---

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

a.  리스트 순서가 바뀌거나 아이템이 추가/삭제될 경우 문제 발생

React는 key를 기준으로 DOM 요소를 비교(diff)합니다. 만약 key가 단순히 index라면, 순서가 바뀌었을 때 기존 DOM을 재사용해 버그를 일으킬 수 있습니다.

 

예시

const [fruits, setFruits] = useState(['apple', 'banana', 'cherry']);

<ul>
  {fruits.map((fruit, index) => (
    <li key={index}>
      <input value={fruit} />
    </li>
  ))}
</ul>

• 사용자가 'banana'의 <input>에 값을 입력하고, 배열의 순서를 바꾸면 그 입력값이 다른 아이템에 적용될 수 있습니다. React는 key가 같으면 같은 컴포넌트라고 보기 때문에 DOM을 재사용하기 때문입니다.

b.  성능 최적화가 무력화됨

React는 key 를 통해 변경이 일어난 최소한의 부분만 리렌더링하려고 합니다. 하지만 인덱스 기반 key 를 쓰면, 중간에 아이템이 추가/삭제될 때 이후 모든 항목이 불필요하게 리렌더링될 수 있습니다.

 

---

3.  언제 index를 key로 써도 되는가?

예외적으로, 다음과 같은 조건에서는 index를 key 로 써도 괜찮습니다.

• 리스트가 절대 변경되지 않을 때
• 리스트가 정적이며 사용자 입력 등으로 인한 상태 변화가 없을 때
• key 로 사용할 수 있는 고유값(id 등)이 없고, 리스트가 짧고 단순할 때

그러나 대부분의 경우, 특히 상태 변화가 있는 리스트라면 index 대신 고유 식별자를 사용해야 합니다.

 

---

4.  좋은 key의 예시

const users = [
  { id: 'u1', name: 'Alice' },
  { id: 'u2', name: 'Bob' },
];

<ul>
  {users.map(user => (
    <li key={user.id}>{user.name}</li>
  ))}
</ul>

• 이처럼 고유한 id 값을 key 로 사용하면, React가 각 요소를 정확히 식별하고 효율적으로 리렌더링할 수 있습니다.

 

---

5.  마무리

React에서 map 을 사용할 때 key 로 index 를 사용하는 것은 편리하지만, 예상치 못한 버그나 성능 저하의 원인이 될 수 있습니다. 리스트의 요소가 변경될 가능성이 있다면 항상 고유한 식별자(id 등)를 사용하는 습관을 들이는 것이 좋습니다.

 

---