리액트에서 배열 렌더링 시, key가 필요한 이유

Key

리액트의 key는 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key는 element에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이다. 대부분 데이터의 id를 key로 사용한다.

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

 

렌더링한 항목에 대한 안정적 id가 없을 경우, 항목의 인덱스를 key로 사용하기도 하나 권장되지 않는다.

 

참고

리스트와 Key – React

 

인덱스를 key로 사용할 경우 부정적인 영향에 대한 상세 설명

Index as a key is an anti-pattern