map 메소드에 key속성을 사용하는 이유

I'm ·2023년 4월 16일
0

React

목록 보기
5/5
post-thumbnail

Warning : Each child in a list should have a unique "key" prop

  • 성능 최적화 : React는 효과적인 렌더링을 위해 Diffing 알고리즘을 사용합니다. 이 알고리즘이 이전 트리와 새 트리를 비교하여 어떤 업데이트가 필요한지 결정합니다. 각 항목에 고유한 'key'를 부여하면 React가 이 차이를 훨씬 더 효율적으로 식별할 수 있습니다.
    특히, 리스트의 항목 순서가 변경되거나 새 항목이 추가/제거될 때, key는 React가 어떤 항목을 업데이트할지, 어떤 항목을 재사용할지 결정하는데 도움이 됩니다

  • key값을 index로 사용할 경우
    index를 key값으로 사용 중에 배열이 재배열되면, 항목의 순서가 바뀌었을 때 key또한 바뀔 것이기 때문에 좋지 않다.

profile
프론트엔드 개발 공부

0개의 댓글