key 속성의 중요성과 올바른 사용법은 무엇인가요?

key는 리스트를 렌더링할 때 각 항목을 고유하게 식별하기 위한 특수 속성입니다. 재조정 과정에서 리액트가 어떤 항목이 추가·삭제·이동·변경됐는지 빠르고 정확하게 판단하도록 돕습니다.

왜 중요한가

key가 없으면 리액트는 항목을 순서(위치) 로만 비교합니다. 중간에 항목이 삽입·삭제되면 그 이후 항목들이 전부 “바뀐 것”으로 처리되어, 불필요한 DOM 갱신이 일어나고 항목에 담긴 상태(입력값 등)가 엉킬 수 있습니다. 안정적인 key가 있으면 리액트는 같은 key = 같은 항목으로 보고 DOM과 상태를 그대로 유지합니다.

{
  todos.map((todo) => <li key={todo.id}>{todo.text}</li>);
}

배열 인덱스를 key로 쓰면 안 되는 이유

// ⚠️ 위험: 인덱스를 key로
{
  todos.map((todo, index) => <li key={index}>{todo.text}</li>);
}

리스트의 순서가 바뀌거나 중간에 삽입·삭제되면, 같은 인덱스가 다른 항목을 가리키게 됩니다. 그러면 리액트가 항목을 잘못 매칭해 다음 문제가 생깁니다.

• 입력 중인 체크박스·input의 상태가 엉뚱한 항목으로 옮겨감
• 불필요한 리렌더링·DOM 갱신
• 애니메이션이 깨짐

리스트가 고정이고 순서가 절대 바뀌지 않으며 항목에 상태가 없다면 인덱스를 써도 무방하지만, 가능하면 피하는 것이 안전합니다.

올바른 사용 규칙

• 데이터에 있는 안정적이고 고유한 id를 사용합니다.
• key는 형제 사이에서만 고유하면 됩니다(전역 고유일 필요 없음).
• Math.random()처럼 렌더링마다 바뀌는 값은 절대 쓰지 않습니다(매번 새 항목으로 인식해 전부 다시 만듦).