[이상조] 2장: 리액트 핵심 요소 깊게 살펴보기

2장/이상조.md

@@ -0,0 +1,35 @@
+## React Fiber
+
+react element를 가상돔에 적용하기 위한 객체.
+
+즉, 리액트의 가상돔이란 fiber 객체들이 트리 구조를 이루고 있는 것임.
+
+다만 react element에서 hooks, 상태, 라이프사이클 등이 포함되어 조금 더 확장된 형태를 띄는 것이 fiber 객체임.
+
+가상돔은 current트리와 workInProgress트리를 갖고있는 더블 버퍼링 구조임.
+
+current트리는 현재 마운트된 돔을 fiber 트리로 표현한 것임.
+
+render phase에서 작업중인 fiber 트리가 workInProgress트리임.
+
+commit phase가 지나면 workInProgress트리가 current트리가 됨.
+
+workInProgress트리의 각 fiber 노드는 work라는 단위로 컴포넌트의 변경을 돔에 반영하려고 함.
+
+이 work들은 비동기로 이루어짐. 16이전의 스택 구조와는 달리 fiber는 순서를 조작할 수 있게 됨.
+
+따라서 useTransition, useDeferredValue 등으로 렌더링 우선순위를 조작할 수 있다.
+
+### 궁금한 점
+
+컴포넌트A의 상태 a가 업데이트된다. > render phase가 진행되고 재조정을 통해 가상돔의 workInProgress트리가 빌드됨 > commit phase가 진행되고 가상돔의 변경점이 돔에 반영됨. > paint를 진행하여 유저가 변경을 확인할 수 있도록 화면이 변경됨.
+
+이라는 느낌으로 이해했는데...
+
+그렇다면 컴포넌트A의 상태 a가 업데이트되고, 상태 a가 변경되면 자동으로 상태 b도 업데이트되는 구조라면?(useEffect라던지...)
+
+컴포넌트A의 상태 a가 업데이트된다. > render phase가 진행되고 재조정을 통해 가상돔의 workInProgress트리가 빌드됨 > commit phase가 진행되고 가상돔의 변경점이 돔에 반영됨. > paint를 진행하여 유저가 변경을 확인할 수 있도록 화면이 변경됨. > 상태 a의 업데이트로 인한 상태 b의 업데이트가 발생한다 > render phase가 진행되고 ... > ...
+
+이런 느낌인 것일까?
+
+물론 아니다. 리액트는 각종 hooks와 상태 변경과 관련된 작업을 모두 진행하고 나서 그것을 바탕으로 render phase를 진행한다.