리액트의 파이버를 보기 전에 가상 Dom 이란 무엇인지 보고 오시면 더 좋을 것 같아요 !
리액트의 파이버란?
가상 DOM 의 변경 사항을 실제 DOM 에 적용하는 과정을 최적화할 수 있게 해주는 아키텍처
이렇게 정의내리고 싶습니다.
리액트 파이버는 가상 DOM 과 연관이 굉장히 깊은 아키텍처에요.
리액트 16 부터 가상 DOM 을 그릴 때 파이버 노드를 이용해서 그리게 되거든요 .. !
일단, 리액트 파이버에서는 Current Tree / Work In Progress Tree 가 있습니다.
(모던 리액트에서는 아마 가장 뒤에 나오겠지만 ... )
- current tree : 실제 Dom과 동일한 형상의 트리, Fiber 노드로 이루어져 있음
- work in progress tree : 변경되는 사항에 대해 작업중인 트리
work-in-progress는 사용자가 보이지 않는 곳에서 동작하게 됩니다 👀
두 트리를 이용하는 것이 더블 버퍼링 기법을 사용했다고 말하는데요.
변경되는 사항에 대해 계속 업데이트를 해주게 되면 그래픽의 버벅임이 있을 수 있기 때문에 사용자에게 보여줄 수 있을 때 변경시켜주는 기법입니다.
두 단계로 나눌 수 있는데요.
1 ) Render 단계
> 리액트 컴포넌트가 렌더되는 단계는 아닙니당
Fiber 노드로 이루어진 가상 Dom 을 재조정(reconciliation) 하는 단계입니다.
function FiberNode(tag, pendingProps, key, mode){
// Instance
this.tag=tag
this.key=key
this.elementType=null
this.type=null
this.stateNode=null
//Fiber
this.return=null
this.child=null
this.sibling=null
this.index=0
<-- 중략--->
}재조정은 실제 Dom 과 가상 Dom의 sync 를 맞추는거라고 생각해주시면 될 것 같습니다.
Fiber Node 가 간단하게 위에 코드로 설명되어 있는데요. 저렇게 생긴 객체 Node 를 Dom에서 추가 / 삭제 할건지 계산해준다고 생각하면 될 것 같아요 !
(리액트 Element와 형상이 동일하다고 생각될 수 있지만 파이버 노드는 가능하면 재사용한다는 점에서 차이가 있습니다.)
그리고 이 작업은 work-in-progress 트리에서 이루어지게 됩니다.
++ 추가적으로 Fiber 개념이 도입된 리액트 16 버전에서는 이 재조정에 관련된 부분도 Stack > Fiber 로 변경이 됩니다.
왜 변경되게 되었냐라고 하면 다음과 같은 이유입니다.
(as-is) 기존 재조정 알고리즘
: 스택 알고리즘 / 동기적으로 동작함
동기적으로 동작한다는 것은 하나의 일이 끝나야지 다음 일을 시작할 수 있다는 것을 의미합니다.
그래서 애니메이션의 지연이 있다거나 사용자의 인터랙션이 부드럽지 않을 수 있는 단점이 있습니다.
<예제>
사용자의 입력이 있을 때마다 data를 fetch 해오는 Input 이 있다.
그리고 이 Input은 fetch한 결과 값이 나올 때까지 loading 스피너를 보여준다.
이런 Input을 동기적으로 동작시켜야 한다면 ?
사용자 입력 -> data fetch 요청 -> 로딩스피너 -> data fetch result 받아옴 -> 사용자 입력
이런 순서대로 동작시켜야하기 때문에 사용자 입력이 버벅일 수 있는 문제점이 있습니다.
(to-be) 그래서 리액트 파이버 알고리즘은 ?
이러한 스택 알고리즘의 단점을 해결하기 위해 리액트 파이버는 비동기적으로 동작할 수 있게 됩니다.
작업 단위를 작게 쪼개고, 작업을 진행 중이어도 더 우선순위가 높은 작업이 들어오게 된다면 현재 작업을 멈추고 더 중요한 작업을 처리(우선순위 기반 스케줄링)할 수 있게끔 함. UI를 그리는데 블로킹 되지 않을 수 있음
2) Commit 단계
실제 Dom 에 적용하는 단계입니다.
동기적으로 이루어지고, 작업 내용은 취소할 수 없습니다.
실제 Dom 에 적용하는 단계이기 때문에 실제 Dom 형상과 동일한 Current Tree를 Work-in-progress 트리 형태로 바꿔주어야겠죠?
그래서 포인터를 이용하여 Work-in-progress Tree를 Current Tree 로 변경시켜주게 되어 사용자가 보는 UI 환경에도 변경점이 생기게 됩니다 !!
'TECH > React' 카테고리의 다른 글
| 말줄임 + hover시 툴팁 표시 컴포넌트 만들기 (0) | 2023.05.19 |
|---|---|
| 리액트의 VirtualDom 이 어떻게 실제 DOM 에 반영할까 1 - Diffing 알고리즘 (0) | 2022.12.10 |
