reconciliation (2) 썸네일형 리스트형 [react]리엑트의 비교조정(reconciliation) 알고리즘 이해 1. 글을 쓴 이유 리엑트의 동작 과정은 렌더링과 커밋 과정으로 구분된다. 렌더링 | 컴포넌트 함수를 호출하여 리엑트 엘리먼트 구성=> 리엑트 엘리먼트를 모아 가상 돔 트리 구성 =>재조정 커밋 | 재조정 함수를 통해 반환된 돔 변경 요구사항을 실제 돔에 반영 여기서 살펴볼 재조정 혹은 비교조정이란, 기존 가상 돔과 "상태값 변경 후 재생성된 신 가상 돔" 간의 변화된 부분을 확인하는 작업이다. (노드 간의 위치는 동일한지 && 내부 값은 동일한지) 일반적으로 돔 트리 비교 알고리즘은 모든 돔 노드를 가상돔 노드와 비교하는 방식으로 O(n^3)의 횟수가 필요하므로 매우 비싼 연산 작업이다. 이를 해결하기 위해 리엑트는 다른 비교 알고리즘을 사용한다. 이 알고리즘을 잘 이해할 수 있다면, 예기치 못한 오류.. [React] 리엑트 살펴보기1: 가상 돔과 리엑트의 렌더링 과정 본 글은 리엑트를 왜 사용하는가에 대해 알기 위해서 "가상 돔과 리엑트의 렌더링 과정"을 중심으로 살펴본다. 목차 1. 브라우저의 동작 과정1: 최초 렌더링 2. 브라우저의 동작 과정2: 업데이트와 DOM 수정 2. 가상 돔 개념의 등장 3. react의 두 가지 동작 프로세스(render, commit) 4. 업데이트와 재조정(reconciliation) 5. 의의 1. 브라우저의 동작 과정1: 최초 렌더링 리엑트를 알려면 가상 돔이 왜 등장했는지 알아야 하고, 가상 돔의 등장 이유를 알려면 브라우저의 동작과정을 알아야 한다. 우선은 브라우저의 동작과정 중 최초 렌더링을 살펴보자. html 파일 파싱, css 파일 파싱 브라우저는 서버로부터 받은 html 파일을 위에서부터 아래로 한줄 씩 파싱하여 DO.. 이전 1 다음