이 작은 차이가 성능을 바꾼다! key={index} vs key={id}

🔍 key={index} vs key={id} 차이점 & 성능 최적화 이유

React에서 리스트를 렌더링할 때 각 항목을 구별할 수 있도록 key 속성을 제공해야 합니다.
잘못된 key 설정은 불필요한 리렌더링을 유발하고 성능을 저하시킬 수 있습니다.
이번 포스팅에서는 key={index}와 key={id}의 차이점을 설명하고, 최적의 방법을 알아보겠습니다.

---

🚨 key={index}의 문제점

{data.map((item, index) => (
    <FimListItem key={index} item={item} />
))}

✔️ index를 key로 사용하면 배열 순서가 바뀔 때 React가 항목을 잘못 인식할 가능성이 큽니다.

📌 문제 발생 시나리오

1️⃣ 새로운 항목이 리스트 중간에 삽입될 때

• 기존 리스트: [A, B, C]
• 새로운 리스트: [A, NEW, B, C]
• React는 index를 기준으로 비교하므로 B가 NEW가 되고, C가 B가 되는 식으로 잘못 매칭됨.

2️⃣ 리스트 항목이 삭제될 때

• 기존 리스트: [A, B, C]
• A가 삭제되면 React는 B를 A로, C를 B로 인식할 가능성이 있음.
• 컴포넌트의 상태가 꼬일 가능성이 있음.

즉, 리스트가 자주 변경되거나 정렬이 바뀌는 경우 index를 key로 사용하면 문제가 발생할 가능성이 높음.

---

✅ key={id}를 사용해야 하는 이유

{data.map((item) => (
    <FimListItem key={item.id} item={item} />
))}

✔️ id는 각 항목이 가지는 고유한 값이므로, React가 리스트를 정확히 추적할 수 있습니다.

💡 성능 최적화 이유

• React는 key를 기준으로 가상 DOM을 비교하여 변경된 부분만 업데이트합니다.
• index를 사용하면 배열 순서가 바뀔 때 불필요한 리렌더링이 발생하지만,
  고유한 id를 사용하면 변경된 항목만 업데이트됩니다.

즉, key={id}를 사용하면 불필요한 리렌더링을 방지하고 최적의 성능을 유지할 수 있음!

---

🔍 key={index} vs key={id} 비교

기준 key={index} key={id}

항목이 추가/삭제될 때	React가 기존 요소를 잘못 인식할 수 있음	React가 정확하게 항목을 인식
리스트 순서가 변경될 때	불필요한 리렌더링 발생 가능	변경된 항목만 업데이트
성능 최적화	성능 저하 가능	최적의 렌더링 성능 유지

---

🎯 결론

✔ 리스트가 자주 변경되거나 정렬이 바뀔 경우,
👉 항목의 고유 ID(id)를 key로 사용해야 React의 성능 최적화가 이루어짐!

React의 렌더링 최적화를 위해 index 대신 고유한 id 값을 활용하세요!