재조정 (1) 썸네일형 리스트형 [react]리엑트의 비교조정(reconciliation) 알고리즘 이해 1. 글을 쓴 이유 리엑트의 동작 과정은 렌더링과 커밋 과정으로 구분된다. 렌더링 | 컴포넌트 함수를 호출하여 리엑트 엘리먼트 구성=> 리엑트 엘리먼트를 모아 가상 돔 트리 구성 =>재조정 커밋 | 재조정 함수를 통해 반환된 돔 변경 요구사항을 실제 돔에 반영 여기서 살펴볼 재조정 혹은 비교조정이란, 기존 가상 돔과 "상태값 변경 후 재생성된 신 가상 돔" 간의 변화된 부분을 확인하는 작업이다. (노드 간의 위치는 동일한지 && 내부 값은 동일한지) 일반적으로 돔 트리 비교 알고리즘은 모든 돔 노드를 가상돔 노드와 비교하는 방식으로 O(n^3)의 횟수가 필요하므로 매우 비싼 연산 작업이다. 이를 해결하기 위해 리엑트는 다른 비교 알고리즘을 사용한다. 이 알고리즘을 잘 이해할 수 있다면, 예기치 못한 오류.. 이전 1 다음