2026-01-30

리액트에서 key란?

리액트가 리스트의 각 요소를 식별하기 위한 고유한 기준값

  • 리액트는 key를 기준으로
    • 이전 렌더 결과와
    • 다음 렌더 결과를 비교
  • 어떤 컴포넌트를 재사용할지 결정함

⇒ key = 컴포넌트의 정체성

index가 문제인 이유

⇒ index는 “위치값”일 뿐이다

list.map((item, index) =><Itemkey={index} />)
  • index는 배열에서의 순서
  • 데이터 자체의 고유한 값은 아님

index 사용시 발생하는 문제

  • 상태 꼬임
    • 배열의 요소들이 추가되거나 삭제될 때, 배열의 순서가 바뀌는 경우 문제가 발생
    • 입력값, 체크 상태가 다른 아이템으로 이동
  • 잘못된 컴포넌트 재사용
    • 데이터와 컴포넌트가 어긋남
  • 불필요한 리렌더링
    • key 값이 바뀌면 요소를 새로운 요소로 인식
    • 불필요한 DOM 업데이트 발생
    • 실제로는 바뀌지 않은 요소도 다시 렌더됨

언제 index를 써도 되나?

  • 리스트가 절대 변하지 않음
  • 추가 / 삭제 / 정렬 없음
  • 단순 출력용 리스트, 고정된 짧은 데이터
  • 실무에서는 거의 없음

올바른 key 사용 방법

{list.map(item => (
	<Itemkey={item.id} />
))}
  • 데이터가 가진 고유한 id
    • 서버의 데이터베이스에서 제공하는 고유 ID를 사용하는 것 권장
  • 렌더링 순서가 바뀌어도 동일한 컴포넌트로 인식

요약

index는 위치를 나타내는 값이기 때문에, 리스트가 변하는 순간 컴포넌트의 정체성이 깨진다.

참고자료

  • https://dachaes-devlogs.tistory.com/66
  • https://velog.io/@ttoottie/key%EC%97%90-index%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%EA%B2%8C-%EC%99%9C-%EC%95%88%EC%A2%8B%EC%9D%84%EA%B9%8C
  • https://disco-biscuit.tistory.com/128
  • https://zinyy.tistory.com/entry/React-key%EC%97%90-index%EB%A5%BC-%EC%93%B0%EB%A9%B4-%EC%99%9C-%EC%95%88-%EB%90%A0%EA%B9%8C-%F0%9F%A7%90

results matching ""

    No results matching ""