fiber는 리액트 16에서 나온 아키텍처이다. stack과 조금 다르게 쌓이는 건 스택처럼 쌓이지만 나오는 순서는 무관한게 fiber의 특징이다. fiber에서 무언가를 꺼낸다는 것은 변화에 적용한다는 것을 의미이다. 렌더링하는 순서를 조정하기 위해서 stack에서 fiber라는 아키텍처가 필요했다. stack은 진행 중인 것을 멈출 수 없고, 렌더링 순서를 유연하게 가져갈 수 도 없다.

16버전에 들어왔고, 본격적으로 사용되기 시작한 버전은 18버전이다. useTransition이 들어오면서 이다.

리액트 패키지의 구성 요소

• react 코어

컴포넌트를 정의하고, 다른 패키지에 의존성이 없어 다양한 플랫폼에 사용이 가능합니다.

• render
  • react-dom, react-native-renderer 등 호스트 렌더링 환경에 의존적입니다.
  • 호스트와 react를 연결하는 작업.
• event
  • 신테틱 이벤트라는 이름의 내부적으로 개발된 이벤트 시스템으로 기존 웹에서의 event를 래핑을 수행할 수 있게 합니다.
• scheduler
  • react는 태스크 단위로 비동기로 실행한다. 실행 타이밍을 가지고 있다.
• reconciler
  • fiber 아키텍처에서 VDOM 재조정을 담당하고, 컴포넌트를 호출하는 곳이다.

용어

• 렌더링
  • 컴포넌트를 호출한다는 것은 결국 react element를 반환한다. 이때 받은 react element를 통해서 VDOM을 재조정하는 작업을 하게 된다. ← 여기까지 렌더링
  • 렌더링 이후에 renderer가 컴포넌트 정보를 DOM에 삽입합니다. 이 과정을 mount라고 한다.
  • mount가 끝난 DOM을 브라우저가 paint 하게 된다.
• react element
  • 컴포넌트 호출 시, DOM에 삽입된 내용을 담은 객체를 리턴합니다.
• fiber
  • VDOM의 노드 객체이다. react element의 내용이 반영되기 위해서는 VDOM에 추가가 되어야 한다. react element에 컴포넌트의 상태, 라이프사이클, hook 등을 추가한 것이 바로 fiber이다. fiber 또한 자바스크립트 객체이며 react element를 VDOM에 업데이트하기 위해 확장한 것이다.

Virtual DOM 이 자바스크립트 객체라고? render phase 와 commit phase 로 나누어서 동작 원리 살펴보기

VDOM은 프로그래밍 컨셉으로 메모리 상 UI 관련된 정보를 띄우고, react-dom과 같은 라이브러리에 의해 실제 DOM과 싱크를 맞춥니다. 이 과정을 재조정(reconcillation)이라 부릅니다. 가상이라고 불리는 이유는 실제 돔을 본따서 메모리에 저장해두었기 때문입니다.