Reconciliation
컴포넌트의 state나 props가 변경되었을 때 React가 가상 DOM을 업데이트하여 실제 DOM과의 차이점을 비교하는 과정
•
이전 Virtual DOM과 새로 업데이트된 Virtual DOM을 비교하여 실제 DOM을 업데이트하는 데 필요한 최소한의 변경 사항을 식별하고 효율적으로 적용하여 성능을 개선하고 의도치 않은 부작용을 줄이는 그것.
•
Reconciliation 작업이 끝나고 나선 react dom이 최소화된 형태의 업데이트를 실제 DOM에 수행한다
프로세스
1.
root element가 같은지 확인함
2.
root element의 attribute 확인함
3.
root element의 자식들 확인
4.
끝까지 무한반복
Diffing 알고리즘
Virtual DOM 업데이트 시 React가 바뀌어야할 노드를 확인할 때 사용하는 알고리즘
•
위에 설명될 Reconciliation 프로세스의 첫번째 작업
•
해당 알고리즘은 Virtual DOM을 재귀 순회하며 업데이트된 Virtual DOM과 이전 Virtual DOM을 비교하며 바뀐 부분이 있을 경우 업데이트 되어야할 노드를 dirty 체크함
특징 1 - 부모가 다르면 다른 컴포넌트 파괴 후 재생성!
// 1
<div>
<Counter />
</div>
// 2
<span>
<Counter />
</span>
TypeScript
복사
•
root 요소가 다른 타입을 가지고 있는 경우 리액트는 새로 렌더링함
◦
이 때 내부 state는 말소됨
•
1과 2는 다른 부모 요소를 가지고 있으므로 리렌더링!
특징 2 - 같은 타입을 가진 DOM 요소
// 1
<div className="before" title="stuff" />
// 2
<div className="after" title="stuff" />
TypeScript
복사
•
요소의 타입? → div, span과 같은 태그 명
•
같은 타입의 DOM 요소에서 attribute만 바뀔경우 간단하게 attribute 값 만 바꿈
•
attribute 값만 바꾼 후 자식 요소 Diffing 체크를 계속 수행함
특징 3 - 컴포넌트의 props가 바뀔 경우
•
컴포넌트의 props가 바뀔 경우 내부 state는 그대로 유지됨
•
컴포넌트의 내부 state의 유지는 UI Tree 상 위치에 해당되는 문제
React, React DOM
•
React는 Virtual DOM을 조작하기 위해 사용됨
•
React DOM은 실제 DOM을 조작하기 위해 사용됨
<App />
ReactDOM.render(<App />, document.getElementById('root'))
TypeScript
복사
<button class='button button-blue'>
<b>
OK!
</b>
</button>
TypeScript
복사
리액트 JSX 코드
{
type: 'button',
props: {
className: 'button button-blue',
children: {
type: 'b',
props: {
children: 'OK!'
}
}
}
}
TypeScript
복사
일반 자바스크립트 객체로 존재하는 형태
•
element는 DOM 노드에 대한 설명과 갖고있는 프로퍼티에 대한 정보를 가지고 있는 일반 자바스크립트 객체
◦
자식이 무엇인지
◦
어떤 프로퍼티를 가지고 있는지 등등
•
element는 실제 인스턴스가 아님 → 리액트한테 “~~~이렇게 해라.”라고 말하는 청사진과 같은 개념
◦
실제 DOM 요소와 비교해 아주 많이 가벼움 - 그냥 객체잖아
•
리액트의 강점이 여기서 나옴
◦
리액트는 복잡한 부분을 추상화하여 지가 알아서 변경을 감지하고, 비교하고, 업데이트할 부분만 업데이트한다.