[6주차 위페] React 배열 렌더링 Key

key를 설정하는 이유

React는 배열을 렌더링할 때 Virtual DOM을 사용해서 변경된 부분만 실제 DOM에 반영합니다.
이때 어떤 요소가 추가되었는지, 삭제되었는지, 변경되었는지를 빠르게 파악하려면 각 항목을 식별할 수 있는 고유한 값이 필요합니다. 이 값이 바로 key입니다.

예시:

여기서 key={item}을 통해 React는 각 항목을 고유하게 식별할 수 있습니다.

---

key를 설정하지 않으면?

• React는 요소의 위치 기준으로 업데이트를 시도합니다.
• 배열 항목의 순서가 바뀌거나 삽입/삭제되면 예상치 못한 방식으로 컴포넌트를 재사용할 수 있음
• 결과적으로 렌더링 오류, 상태 꼬임, 입력값 초기화 등의 버그가 발생할 수 있음

---

⚠️ key 설정 시 주의할 점

고유한 값을 사용해야 함	가능하면 데이터의 고유 ID를 key로 사용해야 함 (id, UUID 등).
index를 key로 사용하는 것은 피해야 함	항목의 순서가 바뀌거나 추가/삭제될 경우 문제가 생길 수 있음.
렌더링 대상이 정렬되거나 삽입될 가능성이 없을 경우에만 index 사용 허용	정적 배열이라면 index도 무방하지만, 동적인 경우에는 위험함.

 

❌ 좋지 않은 경우: index 사용

 

✅ 좋은 예: 고유 id 사용