# React Fiber

---

## React Fiber

Fiber는 React의 새로운 구조로, 애플리케이션의 렌더링 과정을 효율적으로 처리하기 위해 도입되었다. Fiber는 기본적으로 작업 단위를 뜻하며, 각 React 요소에 대한 정보를 포함한다. 예를 들어, 요소의 타입, 상태, 속성 등이 포함된다.

```
const fiber = {
  type, // 요소의 타입
  key, // 요소의 고유 키
  parent, // 부모 Fiber
  child, // 첫 번째 자식 Fiber
  sibling, // 형제 Fiber
  stateNode, // 요소의 상태 노드 (예: DOM 노드, 클래스 인스턴스 등)
  // ... 기타 필드들
};
```

Fiber의 몇 가지 특징은 다음과 같다.

### 동시성과 증분 렌더링

Fiber는 증분 렌더링(incremental rendering)을 가능하게 한다. 즉, 렌더링 작업을 여러 개의 작은 단위로 나누고, 필요한 경우에만 작업을 수행하거나 중지할 수 있다. 이를 통해 렌더링 작업이 메인 스레드를 차단하지 않고, 원활한 사용자 경험을 제공할 수 있다.

Fiber는 이를 위해 일시정지 - 재가동 - 우선순위와 같은 상태를 갖는다.

참고할만한 포스팅

[React Deep Dive - Fiber](https://blog.mathpresso.com/react-deep-dive-fiber-88860f6edbd0)

### 우선순위 기반 스케줄링

React Fiber는 각 작업에 우선순위를 부여하여 스케줄링을 수행한다. 예를 들어, 사용자 이벤트와 관련된 작업은 비동기 작업보다 높은 우선순위를 갖는다. 이를 통해 중요한 작업이 먼저 수행되어 사용자 경험이 향상된다.

### 이중 버퍼링

React Fiber는 이중 버퍼링(double buffering) 기술을 사용한다. 즉, 가상 DOM의 두 개의 복사본을 유지하고, 작업이 완료되면 화면에 표시되는 버퍼와 작업 중인 버퍼를 교체한다. 이를 통해 화면이 갑자기 변경되는 것을 방지하고, 더 매끄러운 화면 전환을 제공할 수 있다.

For the site tree, see the [root Markdown](https://slashpage.com/develop.md).