[모던리액트] 리액트의 파이버 (Fiber)

리액트의 파이버를 보기 전에 가상 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를 그리는데 블로킹 되지 않을 수 있음 

 

스택 기반 (뚝뚝 끊기는 UI)

Fiber (부드러움)

 

 

2) Commit 단계

 

실제 Dom 에 적용하는 단계입니다.

동기적으로 이루어지고, 작업 내용은 취소할 수 없습니다. 

 

실제 Dom 에 적용하는 단계이기 때문에 실제 Dom 형상과 동일한 Current Tree를 Work-in-progress 트리 형태로 바꿔주어야겠죠? 

그래서 포인터를 이용하여 Work-in-progress Tree를 Current Tree 로 변경시켜주게 되어 사용자가 보는 UI 환경에도 변경점이 생기게 됩니다 !!