Skip to content

Latest commit

 

History

History
20 lines (13 loc) · 1.43 KB

key.md

File metadata and controls

20 lines (13 loc) · 1.43 KB
  • key 는 리액트가 어떤 항목을 변경 추가 삭제 할지 식별하는데 도와줍니다.
  • key 는 엘리먼트에 안정적인 고유성을 부여하기 위해 뱅려 내부 엘리먼트에 지정해야합니다.
  • key 가 없다면 버츄얼돔을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지해야 합니다. 하지만 key 를 통해서 더 빠르게 어떤 원소에서 변화가 있는지 감지 할 수 있습니다.

인덱스를 key 로 두면 좋지 않은 이유

  • key 는 리액트가 element 를 식별하는 식별자입니다.
  • 만약 리스트에 아이템이 추가되거나, 삭제되거나 하는 등, 항목의 순서가 바뀐다면 어떨까요? 따라서 인덱스를 Key로 지정해서, 중간의 원소가 삭제되었는데도 해당 index 값을 key 로 갖는 element 가 존재한다면 리액트는 해당 원소에 변경사항을 제대로 반영하지 않을 수 있습니다.

인덱스를 key 로 사용해도 괜찮은 경우

아래의 세가지 항목을 충족하면 인덱스를 key 로 사용해도 괜찮습니다.

  1. 리스트와 아이템이 변경되지 않을 경우
  2. 리스트의 순서가 절대 변경되지 않을 경우
  3. 리스트 아이템에 id 가 존재하지 않는 경우

참고 자료

Index as a key is an anti-pattern (React) | by Robin Pokorny | Medium