diff --git "a/2\354\236\245/\354\235\264\354\203\201\354\241\260.md" "b/2\354\236\245/\354\235\264\354\203\201\354\241\260.md" new file mode 100644 index 0000000..4e55f4b --- /dev/null +++ "b/2\354\236\245/\354\235\264\354\203\201\354\241\260.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를 진행한다.