• 목록
• 게시판 리스트 옵션
  • 검색

✅ JSX 안에서 map 쓸 때 key만 맞춰도 안심하긴 이르다

렌더링 최적화와 key의 진짜 역할

보통 리스트 렌더링은 이렇게 한다:

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

대부분 여기서 멈추지만,
key의 목적은 고유식별자 + 위치 추적용이다.
값이 아닌 인덱스를 key로 쓰면 문제가 생길 수 있다:

{items.map((item, i) => (
  <Item key={i} data={item} />
))}

❌ 문제 발생 상황

• 리스트 중간 삽입/삭제 시

• 컴포넌트 state나 animation이 꼬인다

• 예: input 포커스가 이상하게 움직임

✅ 진짜 해결법

<Item key={item.id} />

• 데이터가 고유한 id를 갖고 있지 않다면

• 리스트를 가공할 때 직접 id 부여해서라도 key를 만들어라

✔️ key는 단순히 경고 제거용이 아니다.
React가 똑똑하게 동작하게 하려면
정확한 key 지정이 필수다.