Skip to main content

DeepDive React

Fiber vs Stack​

ref : https://goidle.github.io/react/in-depth-react-intro/

리액트 16 부터는 Fiber 아키텍처이다.

  • Fiber는 스택과 다르게, FIFO를 지키지 않아도 된다.
  • 그래서 Fiber는 랜더링 순서를 자유롭게 가져갈 수 있다.

리액트 패키지의 구성 요소​

React core

  • 컴포넌트를 정의
  • 다른 패키지에 의존성이 없어 브라우저, 모바일에 모두 사용 가능.

React renderer

  • react-dom, react-native-renderer 등 호스트 랜더링 환경에 의존한다.
  • 웹에서는 DOM을 연결하여 조작한다.
  • reconciler, legacy-events 패키지에 의존성.

Event

Scheduler

  • react는 task를 비동기로 실행한다. useState가 바로바로 반영이 안되는 이유이다.
  • Task를 실행하는 타이밍을 관리한다.
  • Task에는 사용자 입력 처리, 데이터 페칭, 랜더링 작업 등이 있다.
  • ConcurrentMode 등 기능을 사용하여 랜더링 작업의 순위를 미룰 수 있다.

Reconciler

  • fiber architecture 에서 VDOM 재조정 담당
  • 1.변경사항을 감지하여 VDOM 트리 생성
  • 2.Diffing 알고리즘으로 변경된 부분 찾기
  • 3.실제 DOM 업데이트

용어​

https://withboaz.medium.com/react-components-elements-and-instances-%EB%B2%88%EC%97%AD%EA%B8%80-b5744930846b

렌더링

  • 컴포넌트를 호출 후 VDOM까지 적용하는 과정.
  • 전체 과정
    • 1.컴포넌트 호출 후 element
    • 2.VDOM 재조정
    • 3.Renderer가 DOM에 마운트
    • 4.브라우저가 DOM을 paint
      react element

fiber

  • VDOM의 노드 객체이다.(fiber 아키텍처랑 이름이 동일)
  • react element 객체가 fiber로 추가내용이 붙고, VDOM에 적용.
  • 상태, 라이프싸이클, 훅이 관리된다.

--- 참고

네, 리액트에서 state가 변경되었을 때 리렌더링을 효율적으로 관리하는 과정은 Fiber라는 리액트의 새로운 재조정(Reconciliation) 알고리즘과 깊이 연관되어 있습니다. Fiber는 리액트 16에서 도입된 내부적인 구조로, 리액트의 렌더링 프로세스를 더 세밀하고 효율적으로 관리할 수 있게 해줍니다.

Fiber와 상태 변경 감지 및 리렌더링의 관계:​

  1. Fiber 구조의 도입:

    • 리액트의 기존 재조정 알고리즘은 비동기 작업을 적절히 처리하지 못하고, 한 번의 렌더링 작업이 오래 걸리면 UI가 블로킹되는 문제가 있었습니다.
    • Fiber는 이러한 문제를 해결하기 위해 도입된 새로운 아키텍처로, 렌더링 작업을 작은 단위로 나누어 처리하고, 이 작업들을 우선순위에 따라 스케줄링합니다. 이로 인해 리액트는 렌더링 작업을 중단하고, 더 중요한 작업(예: 사용자 입력)을 우선 처리할 수 있습니다.

  2. State 변경과 Fiber의 역할:

    • setState가 호출되면 리액트는 해당 컴포넌트를 리렌더링해야 한다는 사실을 인식합니다.
    • 이때 Fiber는 컴포넌트 트리의 각 컴포넌트를 "Fiber 노드"로 표현하며, 이 노드는 해당 컴포넌트의 상태, props, 그리고 DOM에 대한 참조 등을 담고 있습니다.
    • 상태가 변경되면 해당 컴포넌트의 Fiber 노드가 "업데이트 필요" 상태로 표시됩니다. Fiber 알고리즘은 이 노드를 효율적으로 처리하여, 변경된 부분만을 렌더링할 수 있도록 스케줄링합니다.

  3. 스케줄링과 우선순위:

    • Fiber는 상태 업데이트가 발생할 때, 이를 비동기적으로 스케줄링하고, 우선순위에 따라 작업을 수행합니다. 예를 들어, 사용자 입력과 같이 즉각적인 응답이 필요한 작업은 더 높은 우선순위로 처리되고, 렌더링 작업은 그 다음에 처리됩니다.
    • 이는 리액트가 UI를 부드럽고 빠르게 유지하면서도, 복잡한 렌더링 작업을 효율적으로 관리할 수 있게 합니다.

  4. 연속된 업데이트 처리:

    • Fiber는 배치 업데이트(batch update)를 통해 여러 상태 변경을 한 번에 처리할 수 있습니다. 이는 성능을 최적화하고, 불필요한 중복 렌더링을 방지하는 데 중요한 역할을 합니다.

요약:​

Fiber는 리액트에서 상태 변경을 감지하고 리렌더링을 최적화하는 데 중요한 역할을 합니다. Fiber 구조 덕분에 리액트는 복잡한 UI 렌더링을 더 유연하게 관리할 수 있으며, 렌더링 작업을 우선순위에 따라 나누어 처리할 수 있습니다. 따라서, Fiber는 리액트의 상태 관리와 리렌더링 과정의 핵심적인 부분이라고 할 수 있습니다.