key

rewind: 되감다

key

• 엘리먼트 리스트 만들 때 포함해야 하는 특수한 문자열 어트리뷰트

• key는 react가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.

• key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 앨리먼트에 지정해야함.

• Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것. 대부분의 경우 데이터의 ID를 key로 사용한다.

• map의 두번째 매개변수로 index를 써서 key로 쓸 수도 있지만 권장되지 않음
  why? CRUD를 하면서 항목의 순서가 바뀔 수 있으므로

key를 쓰는 이유

새로운 item을 추가할 때 리스트 마지막에 추가되는데 이때 모든 아이템들이 업데이트 되고 재정렬된다.
이때문에 매번 성능 관점에서 좋지 않고 버그를 일으킬 수 있다.
컴포넌트가 stateful하다면 처리가 끝나기 전에 새로운 item을 추가하면 예상과 달리 처리 중이던 이전의 데이터에 겹쳐지게 되어 다른 결과를 낳을 수 있다.

그러면 왜 리액트는 다음과 같이 작동할까?

리액트는 key가 없을 떄 수차적으로 추가될 item과 이미 렌더링된 아이템을 비교하면서 변화를 감지하는데
개개의 아이템들은 리액트가 보기엔 비슷해 보인다. 그래서 정확히 새로운 아이템이 어디에 추가되야 할 지 모른다.

위 에러는 리액트에 새로운 아이템이 어디에 추가되어야 할지 몰라서 나오는 에러이다.
그래서 key prop을 설정해 주는데 아이템마다 중복되지 않은 값을 줘야한다.

id를 통해 리액트는 각각의 item을 구별할 수 있게 된다

공식문서

third를 추가하려 하면
react는 first,second가 third와 일치하는 것을 확인하고 마지막으로 third를 트리에 추가

리스트의 맨 앞에 엘리먼트를 추가하는 경우 원래있던 트리를 그대로 유지하는 대신 모든 자식 트리를 변경함

key를 준다면 리액트가 item을 빠르게 식별할 수 있으므로 성능이 개선된다.