[Topic #React 01] map 순수 함수 사용 시 key prop은 unique id로 설정!

두 번째 토픽 키워드 주제는 React 입니다.

 

React에서 map 함수를 이용하여 리스트의 원소 렌더링 시 key prop을 index가 아니라 unique id 사용을 권장합니다.
key는 React가 DOM 요소를 식별하기 위해 사용하는 유일한 값입니다.
React는 key를 가지고 기존 트리와 이후 트리의 자식들이 일치하는지 확인합니다.
리스트 중간에 항목을 insert/delete/reorder 등 작업 시

React는 정확히 어떤 프로퍼티가 매핑되어 있는지 인식을 못할 수 있습니다. (예측 불가능 초래 가능)
인덱스를 key로 사용하면 배열이 재배열 될 때 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다.
(배열이 변경되면 효율적으로 리렌더링 못할 수 있음)
컴포넌트의 인스턴스는 key를 기반으로 갱신되고 재사용되며,
인덱스를 key로 사용하면 항목 순서가 뒤바뀔 때 key 또한 바뀔 수 있습니다.

cf) DOM 노드의 자식들을 재귀적으로 처리할 때
React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경사항을 반영합니다.
기존 리스트, 변경된 리스트 순서에서 리스트 끝에 원소 추가되는 것은 두 트리 사이 변경이 원활하게 반영되지만
맨 앞에 엘리먼트가 추가되면 기존 리스트에서 맨 앞에만 원소가 추가되는 것이 아니라
모든 원소가 변경되는 비효율이 발생합니다.
따라서 key prop을 이용하여 효율적인 리렌더링 수행이 가능합니다.

key는 형제 사이에서만 고유한 값이면 됩니다. 전역에서 고유할 필요는 없습니다.
두 개의 서로 다른 배열을 만들 때는 동일한 key를 사용할 수 있습니다.
key를 Math.random() 과 같이 가변적으로 변하는 값을 사용하면
많은 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 나빠질 수 있습니다.

보통 Nano id 같은 것을 이용해 unique id를 간단히 생성하기도 하는 것 같습니다.
결론은 unique id를 사용해야 합니다! (렌더링 최적화 및 트리 탐색과 변화 상태 비교 성능 측면)

---

[Reference 1] - React.js Docs (Lists and Keys)

[Reference 2] - React.js Docs (Reconciliation algorithm)

[Reference 3] - index as a key is an anti-pattern (by Robin Pokorny)