리액트에서 키(key)

 

키(key)

리액트에서 key는 리스트 항목을 고유하게 식별하는데 사용되는 속성이다. key는 주로 리스트의 항목이 동적으로 추가되거나 삭제될 때, React가 어떤 항목이 변경되었는지 추적하고, 리렌더링을 최적화할 수 있게 도와준다.

 

---

 

키가 중요한 이유

• 리렌더링 최적화 : 리스트 항목의 순서가 변경되거나, 항목이 추가/삭제될 때, React는 key를 사용해 각 항목의 고유성을 식별하고, 불필요한 렌더링을 방한다.
• 고유 식별 : key 값이 고유해야 하며, 동일한 리스트에서 중복되지 않아야 한다. 중복되면 React가 어떤 항목을 업데이트해야 하는지 알기 어려워 성능 문제가 밸상할 수 있다.

---

 

key의 사용 방법

리스트의 각 항목에 key속성을 추가해야 한다.

const items = ["Apple", "Banana", "Orange"];

<ul>
  {items.map((item, index) => (
    <li key={index}>{item}</li>
  ))}
</ul>

 

위 코드에서는 key={index}로 각 항목에 key를 지정하고 있다. 여기서 index는 리스트의 순서를 나타내는 값이다.

그러나 배열 항목이 변경될 가능성이 있다면, 고유한 값(예: 데이터베이스 ID등)을 key로 사용하는 것이 좋다.

 

---

 

더 나은 key 사용법 예시

const items = [
  { id: 1, name: "Apple" },
  { id: 2, name: "Banana" },
  { id: 3, name: "Orange" },
];

<ul>
  {items.map(item => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

 

이렇게 key={item.id}로 고유한 값을 사용하는 것이 더 안전하고 성능상 더 좋다.

 

---

 

key와 index 사용 시 주의 사항

• key에 인덱스를 사용하면 일부 경우 성능 문제가 발생할 수 있다. 예를 들어, 리스트에서 항목의 순서가 변경될 때, 인덱스를 key로 사용하면 React가 잘못된 항목을 업데이트할 수 있다.
• 데이터가 변하지 않고 순서가 고정된 리스트에서는 index를 key로 사용하는 것이 괜찮다. 하지만 데이터가 동적으로 변경되거나, 항목이 추가/삭제될 때는 고유한 값을 사용하는 것이 좋다.