[React] Key

Key란?

컴포넌트 배열을 렌더링할 때 어떤 원소에 변동이 있는지 알아내기 위해 사용하는 값이예요.

😭 Key가 없다면

Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지해야해요. (순차 비교하는 만큼 오래 걸리겠죠)

😀 Key가 있다면

더 빠르게 어느 원소에서 변화가 일어났는지 감지할 수 있어요.

React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인합니다. 

key를 추가하여 트리의 변환 작업이 효율적으로 수행되도록 수정할 수 있습니다.

---

Key값 설정하기

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

key값은 언제나 유일해야해요.

⚠️ 최후의 수단으로 index를 떠올릴텐데 이건 안티패턴입니다! (배열이 변하면 index값은 언제나 변할 수 있기 때문이죠.)

---

Key값은 얼마나 고유해야할까요?

• Key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없습니다.

• 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있습니다.

---

🤔 조금 더 생각해보기

왜 리스트의 key값으로 index를 사용하는 것은 안티 패턴일까요?

• 컴포넌트의 state와 관련된 문제가 발생할 수 있어요.
  • 😢 만약 추가 / 삭제 작업을 했는데 key 값이 이전과 같다면 DOM은 그대로 나오겠죠

📖 따라서 항목의 순서가 바뀔 수 있다면 key값으로 index를 쓰지 않는 것이 좋아요.

💪 우테코 미션의 피드백을 봤었는데 정말 변하지 않는 항목이라면 key값으로 index를 써도 괜찮다고 하네요.

---

데이터에 고유한 id 값이 없다면 어떻게 key 값을 설정하는 게 좋을까요?

npm i shorid

import shortid from 'shortid'

console.log(shortid.generate());  // iycxrc8Pu

👆 이런 라이브러리도 있네요.

우테코 크루들은 uuid를 많이 사용하더라구요!

---

참고 페이지

Index as a key is an anti-pattern