재조정 (Reconciliation)

React.Docs를 참고해 작성함 (Link : Docs)

Introduction

React의 경우 Update 발생 시 Application 내부에서 변경된 점만 포착해 해당 부분만 갱신시키는 방식을 통해 속도를 개선한다.
이른바 React의 비교 알고리즘 (diffing)인데, 이에 대해 자세하게 알아보자.

동기

React에서는 render()를 통해 React Element Tree를 생성한다.
- 기본적으로 Tree는 평상시 접하는
```
<html>
	<head>
		...
	</head>
	<body>
		<div>
			...
		</div>
	</body>
</html>
```
  식의 HTML 구현 방식 같은 부모, 자식 형태로 이루어진 구조다. 여기서는 <html> 하위에 <head>, <body>가 있고 다시 <body> 하위에 <div>가 있는 구조다.
- 사족으로, 이 문서에서 Tree에 대해 이해할 때 염두에 두어야 할 것은 ‘시점’의 개념이다.
- 가령 ‘<button> 클릭하면 글자색이 변화한다.’ 라는 기능을 구현했다고 치자. 일단 <button> 클릭 전 뭔가 구현된 화면이 있을 것인데 이 구조를 Tree1이라고 한다면 <button> 클릭 후 글자색을 정의하는 어떠한 값이 바뀌고 그에 맞춰 짜진 결과물이 있을 것이다. 이를 Tree2라고 한다면 각각의 Tree1, Tree2가 개별 Tree가 되는 것이고, Tree1 → Tree2로 변경하는 방법에도 여러가지가 있을 텐데 그에 대해 이 문서에서 서술하는 것이다.
state나 props가 갱신되면 render() 를 거쳐 갱신된 내용에 맞춰 새로운 React Element를 생성하는게 된다. 이 과정에서 React는 2가지 가정을 기반으로 갱신여부를 판단한다.
1. 갱신 전과 갱신 후가 완전히 다른 Type의 Element이다.
2. 개발자가 key prop을 통해 Element에 고유 값을 부여해서 그 값을 기준으로 React가 갱신 여부를 판단하도록 돕는다.

비교 알고리즘 (Diffing Algorithm)

기본적으로 React는 Root Element부터 비교한다. (= 상위 Element로부터 비교를 시작한다.)
```
<div>
	<span>
		....
	</span>
</div>
```

Element Type이 다른 경우

이 경우 React는 이전 Tree를 완전히 삭제하고 새롭게 구성한다.
```
//Tree.1
<div>
	<Counter />
</div>

//Tree.2
<span>
	<Counter />
</span>
```
- <div>와 <span>으로 <Counter />를 갑싸고 있는 상위 Element의 Type이 다르다. 이 경우 Tree.1 → Tree.2로 변경된다면 Tree.1에서 Rendering된 기존 <Counter />는 삭제하고 새롭게 <Counter />를 불러와 실행한다.

Element Type이 같은 경우

이 경우 속성을 확인해서 동일한 것은 유지하고, 변경된 것만 갱신한다.

//Tree.1
<div className="before" title="stuff" />

//Tree.2
<div className="after" title="stuff" />

만약 CSS Style이 갱신되었다면 style 전체를 갱신하지 않고 style 내부에서 변경된 속성 값만 갱신한다.
```
//Tree.1
<div style={{color : 'white', fontWeight : 'bold'}} />
//Tree.2
<div style={{color : 'red', fontWeight : 'bold'}} />
```
<div>와 같은 DOM 노드에 대한 처리가 끝났다면 노드의 자식들을 처리한다.
- DOM : Docunemt Object Model이며 document 객체와 관련한 객체들의 집합을 의미한다.
- Node : node는 tree 구조에 들어있는 모든 객체를 지칭한다.
- 위의 비교 알고리즘에서 언급한 대로 상위에서부터 하위로 내려가면서 Tree 비교 후 삭제 후 재호출, 또는 갱신이 이루어진다는 말이다.

동일한 Component 내부에서 갱신이 발생했을 경우

Component가 갱신되면 state는 그대로 유지되고 props를 갱신한다.

자식에 대한 재귀적 처리

DOM 노드의 자식을 처리할 때 변경 전과 변경 후 Tree 구조를 비교하며 차이가 있다면 변경한다.
```
<ul>
	<li>List1</li>
</ul>
```
React 를 통해 List를 만들었고, 거기에 새로운 항목을 추가한다고 가정해보자.
```
//Tree.1
<ul>
	<li>First</li>
	<li>Second</li>
</ul>

//Tree.2
<ul>
	<li>First</li>
	<li>Second></li>
	<li>Third</li>
</ul>
```
- Tree.1에서 Element를 추가해서 Tree.2로 변경이 되었을 경우 를 순서대로 돌면서 First, Second는 일치하기 때문에 넘어가고 3번째 <li>가 없던 것이 추가되었기 때문에 이 부분만 추가한다.
- 갱신 전과 갱신 후를 원만하게 비교할 수 있다면 상관 없지만 순서가 꼬여 있을 경우엔 문제가 발생한다.
```
//Tree.1
<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>
//Tree.2
<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>
```
- Tree.1 → Tree.2로 변경되었다고 가정하면 Tree.1의 첫 번째 <li>는 Duke, Tree.2의 첫 번째 <li>는 Connecticut이다. 이렇게 된다면 값이 다르기 때문에 양쪽에 Duke, Villanova가 모두 있다고 해도 최종적으로 Tree.2에서는 1,2,3번째 <li>가 모두 갱신이 발생한다.