기술면접 준비 중 리액트는 효율적인 알고리즘을 사용해 이전 가상 돔과 현재 가상 돔의 변경 사항을 비교한다고 읽었다. 이게 뭘 가리키고 어떻게 동작하는지 궁금해졌다.
React 비교(Diffing) 알고리즘
React는 Reconciliation이라고 불리는 과정에서
O(n) 복잡도를 가진 휴리스틱 알고리즘을 사용한다.
❓ 휴리스틱 알고리즘 : 불충분한 시간이나 정보로 인하여 합리적인 판단을 할 수 없거나, 체계적이면서 합리적인 판단이 굳이 필요하지 않은 상황에서,
빠른 의사결정을 할 수 있도록 고안된 컴퓨터 알고리즘
🐡 나무위키 - 휴리스틱 알고리즘
이 알고리즘은 두 가지 중요한 가정을 기반으로 작동한다.
1. 다른 타입의 엘리먼트는 다른 트리를 만든다
🖥️ jsx
// Before
<div>
<Counter />
</div>
// After
<span>
<Counter />
</span>이 경우 React는 이전 div와 그 자식들을 모두 제거하고,
새로운 span 트리를 처음부터 만든다.
2. 개발자가 key prop을 통해 여러 렌더링 사이에서 유지될 자식 엘리먼트를 표시할 수 있다.
🖥️ jsx
// Before
<ul>
<li>first</li>
<li>second</li>
</ul>
// After
<ul>
<li>second</li>
<li>first</li>
</ul>비교 알고리즘의 구체적인 동작 방식
1. 엘리먼트 타입 비교
- 루트 엘리먼트의 타입이 다르면 이전 트리를 버리고 새로운 트리를 처음부터 생성
- 타입이 같으면 속성을 업데이트하고 자식들을 재귀적으로 비교
2. DOM 노드 속성 처리
- 노드의 속성만 업데이트
- 스타일과 같은 객체의 경우 변경된 속성만 업데이트
3. 자식 재귀 처리
- DOM 노드의 자식들을 재귀적으로 처리
- 리스트의 경우 key를 사용하여 효율적으로 비교
4. 리스트 항목 비교 (key 활용)
🖥️ jsx
// key를 사용한 효율적인 비교
<ul>
<li key="1">first</li>
<li key="2">second</li>
</ul>key를 통해 기존 트리와 새로운 트리의 자식들이 일치하는지 확인
순서가 변경된 경우에도 key를 통해 효율적으로 처리
장점
- 예측 가능한 성능 (O(n) 복잡도)
- 실제 DOM 조작 최소화
- 대부분의 실제 사용 사례에서 효율적인 처리
주의점
- key로 배열의 인덱스를 사용하면 비효율적일 수 있음
- 깊은 중첩 구조에서는 성능이 저하될 수 있음
- 리스트 렌더링 시 항상 고유한 key 사용이 중요
아무튼, 개발자