React의 fiber 아키텍쳐? (작성중)

React는 16버전부터 파이버라 불리는 새로운 코어 아키텍처를 채택했다. 기존에 사용하턴 스택 알고리즘과 완전히 다른 것으로 React가 파이버 아키텍처를 사용해 virtual Dom을 어떻게 다루는지 알아보자. 

 

1. Reconciliation

 

Reconciliation은 재조정 이란뜻으로  react가 변경된 상태에 따라 ui를 효율적으로 업데이트하는 과정입다. 

react의핵심 기능 중 하나로 virtual Dom을 활용하여 실제 dom 변경을 최소화 한다.

 

 2. 스택 기반의 알고리즘 

 

react에서는 16버전 이전에 스택 기반 알고리즘을 사용해서 컴포넌트 트리를 Reconciliation했다. 

이 알고리즘은 재귀적으로 컴포넌트 트리를 탐색하며 필요한 업데이트를 수행하는 방식이고 이 과정에서 스택이 사용되었기 때문에 스택 기반 알고리즘이라 불렸다.

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent />
        <ChildComponent />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return <div>Child</div>;
  }
}

이와 같은  클래스형 react 컴포넌트 구조가 있다고 가정하면

 

1. ParentComponent 의 render 메서드가 호출, 이 메서드는 div요소와 두개의 ChildComponent  를 반환한다. 

 

2. ParentComponent가 첫번째 ChildComponent  를 렌더링 하려고 할 때 react는 ChildComponent  의 render 메서드를 호출, 이 과정은 ParentComponent의 render 메서드 안에서 이루어진다.

 

3. 첫번째 ChildComponent  가 렌더링 된 후 react는 두번째 ChildComponent  의 render메서드를 호출하여 렌더링 한다.

 

4. 모든 하위컴포넌트가 렌더링 되면 재귀 호출이 종료되고 상위 컴포넌트로 돌아가서 작업을 수행하는 과정으로 이루어진다. 

 

재귀 호출은 함수 호출 스택을 사용하여 각 호출에 대한 컨텍스트를 저장한다. 함수가 호출될 때마다 새로운 스택 프레임이 생성되고 함수가 종료되면 해당 스택 프레임이 스택에서 제거된다. 이 스택 구조 때문에 재귀적 탐색을 " 스택 기반 알고리즈"이라고한다. 

 

스택 기반의 알고리즘은 직관적이지만 몇가지 문제점이 있다.virtual Dom트리를 비교하고 변경사항을 적용하는 과정에서 모든 작업을 동기적으로, 하나의 큰 테스크로 처리한다.일반적으로 조정과 렌더 과정은 빠르게 일어나 보통 느끼기 어렵지만 트리가 클 경우 콜 스택이 모두 처리될 때 까지 메인 스레드는 아무 작업을 할 수 없으니 버벅임을 느끼게 된다.  

.

이러한 문제점으로 react팀은 증분렌더링을 고안하게 되고 fiber를 도입하게 된 이유이다. 

 

2. fiber 아키텍쳐 

 

 

https://github.com/acdlite/react-fiber-architecture

GitHub - acdlite/react-fiber-architecture: A description of React's new core algorithm, React Fiber

 

일단 fiber는 react의 성능과 유연성을 개선하기 위한 목적으로 설계되었다. 이 새로운 아키텍처는 애플리케이션의 ui를 더 부드럽고 효율적으로 업데이트 할 수 있도록 한다. 

 

 

fiber의 요구 사항은 4개이다. 

1. 작을 멈추고 나중에 다시 시작할 수 있을 것

2. 다양한 유형의 작업에 우선 순위를 지정

3. 이전에 완료한 작업을 재사용

4. 더이상 필요하지 않으면 작업을 중단 .

이 모든 것을 하려면 먼저 작업을 단위로 세분화 할 수 있는 방법이 필요한데, 여기서 말하는 "작업"의 단위를 fibe라고 부른다.