listidentity

React에서 key가 필요한 이유를 설명해 주세요

예상 시간
6분
30초 답변

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

index를 key로 쓰면 무조건 안 되나요?

부가 설명

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

todo.id는 항목 자체의 identity에 가깝기 때문에 순서가 바뀌어도 React가 같은 todo를 같은 항목으로 인식할 수 있습니다.

{todos.map((todo, index) => (
  <TodoItem key={index} todo={todo} />
))}

index key는 list가 고정되어 있고 순서가 바뀌지 않는 경우에는 큰 문제가 없을 수 있지만, 삽입/삭제/정렬이 있는 list에서는 위험합니다.

key는 props처럼 component 안에서 읽는 값이 아닙니다. React가 reconciliation 과정에서 사용하는 힌트입니다. 그래서 child component에서 props.key로 접근할 수 없습니다.

Key는 warning을 없애기 위한 값이 아니라, React가 list item의 identity를 구분하기 위한 값입니다.

한 줄 정리

key는 list 항목의 위치가 아니라 identity를 React에 알려줘서 올바른 재사용과 업데이트를 돕는 값입니다.