React의 Key 프로퍼티: 중요성과 올바른 사용법

React의 key 프로퍼티는 React가 컴포넌트 배열에서 어떤 항목이 변경, 추가 또는 제거되었는지 식별하는 데 사용됩니다. 이는 React의 Virtual DOM 비교 알고리즘인 Reconciliation 과정에서 중요한 역할을 합니다. key는 효율적인 렌더링을 가능하게 하며, 성능 최적화와 버그 방지를 돕습니다.

주요 특징

1. 고유성:
   • key는 배열 내에서 각 항목이 고유해야 합니다.
   • 같은 부모 요소 내에서만 고유하면 되며, 전체 애플리케이션에서 유일할 필요는 없습니다.
2. 불변성:
   • 항목의 순서가 변경되거나 새로운 항목이 추가되더라도 React는 key를 기준으로 비교하므로, key 값이 변하지 않도록 관리해야 합니다.
3. 성능 최적화:
   • key가 없거나 고유하지 않으면 React는 항목 전체를 다시 렌더링합니다.
   • 고유한 key를 사용하면 React가 변경된 항목만 업데이트할 수 있어 성능이 향상됩니다.

---

key를 사용하는 이유

1. 효율적인 업데이트:
   • React는 이전 상태와 새로운 상태를 비교하여 필요한 부분만 DOM에 반영합니다. 이를 위해 각 요소를 식별할 수 있는 고유한 식별자가 필요합니다.
2. 예상 가능한 동작:
   • key가 없으면 React는 리스트 항목의 순서를 제대로 추적하지 못해 의도치 않은 동작이 발생할 수 있습니다. 예를 들어, 입력 필드가 포함된 리스트에서 key를 올바르게 설정하지 않으면 입력값이 엉뚱한 필드에 복사되는 문제가 생길 수 있습니다.

---

사용 예시

기본 사용

const items = ['React', 'Vue', 'Angular'];

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

더 나은 key 사용

위의 예제에서는 index를 key로 사용했지만, 항목 고유 식별자가 있다면 이를 사용하는 것이 더 좋습니다.

const items = [
  { id: 1, name: 'React' },
  { id: 2, name: 'Vue' },
  { id: 3, name: 'Angular' }
];

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

---

key 사용 시 주의사항

1. 배열 인덱스를 key로 사용하는 것을 피하라:
   • 배열의 순서가 변경되거나 항목이 추가/삭제될 때 문제를 일으킬 수 있습니다.
   • 데이터가 정적이고 변하지 않을 때는 인덱스를 사용해도 괜찮지만, 권장되지는 않습니다.
2. 고유 식별자 사용:
   • 데이터베이스나 API에서 제공하는 고유 ID를 사용하는 것이 이상적입니다.
   • 예: UUID, 데이터베이스 기본 키 등.
3. key는 렌더링되지 않는다:
   • key는 내부적으로만 사용되며, DOM 요소의 속성으로 렌더링되지 않습니다.

---

FAQ

1. key를 잘못 사용하면 어떤 문제가 생기나요?

• 성능 저하: React가 불필요하게 전체 리스트를 다시 렌더링할 수 있습니다.
• 데이터 무결성 문제: React가 항목을 잘못 식별하여 상태가 올바르게 전달되지 않을 수 있습니다.

2. key를 생략하면 어떻게 되나요?

• React가 기본적으로 배열 인덱스를 key로 사용합니다. 이는 권장되지 않으며 예상치 못한 동작을 초래할 수 있습니다.

---

요약

React에서 key는 리스트 항목의 고유성을 보장하기 위해 반드시 필요하며, 성능 최적화와 코드의 안정성을 유지하는 데 중요한 역할을 합니다. 고유한 값을 선택해 사용하는 것이 중요하며, 배열 인덱스는 특별한 경우를 제외하고 사용하지 않는 것이 좋습니다.