240601 리액트 스터디 : 리액트 파이버

 

✓ 리액트 파이버

- https://d2.naver.com/helloworld/2690975

- Virtual DOM 이라는 것은 리액트 파이버 트리(HostRoot)를 설명하기 위한 하나의 패턴

-> React elements와 native DOM을 동기화 하기 위한 패턴

- root element를 통해 렌더링 : <div id="root"></div>

const root = ReactDOM.createRoot(  
	document.getElementById('root')
);

 

✓ useRef()

- 리액트 파이버에서 관리할 수 없는 것

- 리액트 파이버 트리가 아닌, DOM을 직접 조작하는 hook

 

✓ 리액트 단계

1) Render : JSX / createElements() -> React elements 생성, 즉 객체를 생성하는 과정

2) Reconcile : 재조정, siblings 등 재귀적으로 노드를 탐색하여 Fiber Node 생성하여 트리를 만드는 단계, DOM 트리와 elements 간 변경사항 적용

3) Commit : 새로운 DOM elements를 브라우저에 커밋

4) Update : props, state 변경 시 위 과정 반복

- 함수형 컴포넌트에서는 단계, 클래스형 컴포넌트에서는 생명주기