[React 까보기시리즈] Fiber, renderer, Vritual DOM

해달·2023년 10월 31일

[1탄] React 까보기 시리즈 개요(feat. Fiber vs Stack)

Fiber 아키텍처

stack 자료구조는 LIFO(Last In Frist Out) 의 형태로 제일 마지막에 들어온 노드가 제일 처음으로 나가는 자료구조 형태이다

Fiber는 React 16버전에 도입되었으며, 순서와 상관없이 노드를 꺼낼 수 있다.

리액트에서 꺼낸 다는것의 의미는 돔에 적용한다는 뜻과 같다.

이를 통해 렌더링 순서를 유연하게 조정할 수 있고 18버전부터 Fiber 아키텍처가 본격적으로 사용 되었다고 한다.

React 패키지에는 React, Shared, Scheduler, Reconciler 등의 구성 요소가 있다.

useState를 호출하면 Scheduler와 상호작용하고,
Scheduler는 Reconciler와 상호작용한다.

[번외] React component, element

위 내용을 보기 앞서 엘리먼트의 구조를 파악하고 보면 이해가 더 잘될 수 있는 선행영상이 있다고해서 먼저 앞서 정리해본다 !

elements 란?

돔트리에 전달할 정보를 담고 있는 객체다.
엘리먼트가 생성되면 2가지의 필드를 가진다.

type
props

fields(type: string | ReactClass, props: object)

type은 string 또는 ReactClass가 할당이 된다.

타입은 엘리먼트의 종류에 따라 달라진다.

그러면 어떤 엘리먼트들이 있을까 ?

(1) 돔 엘리먼트의 경우 태그 이름이 문자열로 할당되고,
(2) 컴포넌트 엘리먼트의 경우 리액트클래스가 할당된다.

(1) react dom elements

문자열이 할당되는 경우는 DOM 엘리먼트일 때다.
DOM 엘리먼트의 props에는 클래스 이름, 자식 엘리먼트 및 버튼 태그의 속성 등이 포함된다.

// Dom elements
{
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      props: {
        children: 'OK!'
      }
    }
  }
}

(2) components elements

Component 엘리먼트일때는 React class가 할당된다.

컴포넌트가 element를 반환하는 함수일 경우에,
element를 리턴하고 element는 Dom tree에 전달할 정보를 가지고 있는 자바스크립트 객체로 구성된다.

컴포넌트는 엘리먼트를 반환함으로써 전체 트리 구조를 형성한다.
props 에는 돔트리에 어떤정보를 전달해야 표현이 될지에 대한 정보가 담긴다.

//Component elements
{
  type: Button,
  props: {
    color: 'blue',
    children: 'OK!'
  }
}

리액트 : 너 버튼 컴포넌트네 ? 나한테 어떤 엘리먼트 줄거야 ?
<Button> : 나는 내가 리턴 할 돔 엘리먼트를 줄게

{
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      props: {
        children: 'OK!'
      }
    }
  }
}
<button class='button button-blue'>
  <b>
    OK!
  </b>
</button>

엘리먼트들을 통한 돔 트리를 생성

React는 엘리먼트 트리를 순환하면서 컴포넌트 엘리먼트를 돔 엘리먼트로 변환한다.

type에 리액트 컴포넌트가 들어가있다면 컴포넌트를 찾아가서 어떤 얼리멘트 주는지 다시 확인하고, 돔엘리먼트일때까지 계속 엘리먼트 트리 순환한다.

그러면 이제 리액트가 전부 다 돔 엘리먼츠만 가지고 있는 엘리먼트 트리를알게되고
리액트 입장에서는 돔트리에서는 어떤 정보를 전달해줘야 될지 알게된다.

돔엘리먼트로 구성한 트리만들어지면 실제 돔 노드 트리에 적용되고
돔노드 트리 완성되면 브라우저 렌더링된다 !

그래서 엘리먼트가 뭔데 !

엘리먼트는 컴포넌트가 반환하는 결과물로, (1)돔 엘리먼트와 (2)컴포넌트 엘리먼트로 나뉘어진다.

엘리먼트는 결국 돔트리에게 전달할 정보를 가지고 있는 자바스크립트 객체다.

결론

컴포넌트는 엘리먼트를 반환하는 함수 컴포넌트와 클래스 컴포넌트로 나뉜다.
엘리먼트는 컴포넌트가 반환하는 결과물로, 컴포넌트 엘리먼트와 돔 엘리먼트로 나뉜다.
엘리먼트 트리는 엘리먼트들로 구성된 트리 구조이며, 돔 트리는 엘리먼트 트리를 기반으로 실제 렌더링을 하는 구조이다.
React.createElement(), JSX, React.createFactory() → return element
React Reconciliation은 React가 가상 DOM에 대한 변경 사항을 결정하고 해당 변경 사항을 실제 DOM에 효율적으로 적용하는 프로세스