React의 Reconciliation 동작에서 children에 key를 추가했을 때, 트리의 변환 작업이 효율적이게 되는 이유를 모르겠습니다.

Question

안녕하세요.

React의 Reconciliation에 대해서 공부중인 FE 개발자입니다.

https://ko.reactjs.org/docs/reconciliation.html
위 공식 문서를 보다보면, 자식에 대한 재귀적 처리에 대한 내용이 나오는데요,
여기서 children에 key를 추가하면 트리의 변환 작업을 효율적으로 할 수 있다고 설명을 하고 있습니다만, 과연 이게 실제로도 효율적으로 처리되는지가 궁금합니다. (key가 없을 때 새 항목이 상단부터 추가되는 경우 의도한대로 동작하지 않는다는 것은 이미 알고 있습니다.)

아래는 제가 테스트한 코드인데요,
제가 생각했을 때, key가 없을 때는 counts 배열에 요소를 추가할 때마다 기존 ChildComponent 컴포넌트들이 모두 언마운트되고 다시 생성되는 등의 비효율적인 작업이 있거나, 그게 아니더라도 뭔가 key가 있을 때보다 매 클릭 시 렌더링이 느려야할 것으로 생각을 했었는데, key가 있든 없든 상관없이 기존 ChildComponent는 재생성되지 않고 그대로 사용되고(useEffect 훅이 최초 렌더링 이후에는 전혀 실행되지 않음), 렌더링 속도도 별 차이가 없는 것 같습니다.

혹시 제가 놓치고 있는 부분이 있을까요?
key의 존재 유무에 따른 트리 변환 작업 효율성 테스트를 어떻게 해보아야 제대로 이해할 수 있을까요?

성원 · Accepted Answer

안녕하세요.

우선 테스트하신 코드에 관해서
Lists의 아이템에 키를 명시하지 않으면 인덱스를 기본 값으로 사용하는 것으로 알고있습니다. 따라서 작성자님이 테스트하신 코드에서는 배열 값이 재정렬 되지 않는다면 인덱스키에 의해 재조정이 효율적으로 일어날 것 같습니다,

If you choose not to assign an explicit key to list items then React will default to using indexes as keys.
참고 (https://reactjs.org/docs/lists-and-keys.html)

Reconciliation 동작에서 children에 key를 추가했을 때, 트리의 변환 작업이 효율적이게 되는 이유
리액트는 자식 노드를 렌더링 할 때 기존, 현재의 돔 트리를 순차적으로 비교한 뒤 차이가 있을 경우 현재 돔 트리에 변화를 일으킨다고 합니다. 이 때 자식 엘리먼트가 추가되는 위치에 따라 의도되지 않은 UI를 그려낼 수 있습니다.

자식 노드에 Key가 있으면 Key를 기준으로 두 트리를 비교합니다.  키를 통해 엘리먼트를 식별하기 때문에 불분명한 순서에 따른 UI 오류를 방지할 수 있습니다.