Batch & Fiber_React

Batch

여러가지 작업을 한번에 묶어서 수행하는 기법
설계상의 이유 또는 최적화를 위해 사용

Fiber

• state, effect, 업데이트에 대한 정보까지 함께 담고 있는 렌더링 단위
• DOM을 어떻게 업데이트 해야할지 관리하며, hook & effect & 상태값을 관리함
• child & sibling을 참조값으로 다음으로 해야할 렌더링 작업, 즉 다음 fiber을 가르키는 그래프 구조로 되었있다
  ex)

function Component() {
	const [count, setCount] = useState(0);
	const increase = () => setCount(count => count + 1);

	return (
		<div>
			<div>{count}</div>
			<button onClick={increase}>Increase</button>
		</div>
	)
}

{
	// 작업 중인 props (props가 없음)
  pendingProps: null,
	// Render Phase 끝난 뒤의 Props (props가 없음)
	memoizedProps: null,
	// count 0 에 대한 정보가 담깁니다. 
	// 실제 DOM에 커밋되어야 하는데 WORK들이 스케줄링되는 update에 대한 정보도 큐로 관리됩니다.
  memoizedState: {
		baseState: { count: 0 },
		next: null, // hook 이 추가적으로 실행되면 LinkedIn 방식으로 hook 정보가 담깁니다.
	},
	...
}
    ```