[TIL] React-List and Key?

🌼 Key?

React에서 key는 list의 item의 변경, 추가,제거 등을 구분하는 것을 도와준다. 안정적인 list를 구성하기 위해서는 array에 각 항목을 구분하기 위한 요소가 포함되어 있어야 한다.

• 가장 최적의 방법은 item 들을 구분할 수 있는 string 형태의 고유의 id를 array 요소가 포함하고 있고 그 id를 index로 사용하는 것이다.

  id는 형제 노드를 구분하기 위한 요소로 해당 list를 구성하는 형제 사이를 구분하면 되며 전체적인 구조에서 유일성을 가질 필요는 없다.

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

• 만약 list를 구성하는 item의 고유한 id가 없다면 array의 index를 key 값으로 사용할 수도 있지만 렌더링시 item의 순서가 바뀌는 경우라면 사용하지 않는 것이 좋다.

  React에서 key는 DOM 요소들을 구분하기 위해서 사용된다. list의 중간에 item을 추가, 삭제되는 경우에 state 이슈가 발생할 수도 있다.

🌻 예외 규칙

index를 사용하는 것은 state 이슈를 피하기 위해서는 지양하는 것이 좋으나 아래와 같은 경우에는 사용을 검토해 볼 수 있다.

1. list의 item들 내용이 정적이면서 변경하지 않는 항목일 경우
2. list의 item이 id를 갖고 있지 않은 경우
3. list의 순서가 절대 변경되지 않고 재구성 되지 않을 경우

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

출처: React 공식 사이트, Blog-Robin Pokorny