[React] createRoot()와 render()

이번 포스트에서는 React Rendering에 대한 내용을 코드를 보며 이야기한다.

createRoot()

const reactDOMroot = createRoot(container[, options]);
reactDOMroot.render(<App />);

createRoot()함수는 주어진 container에 대해 React Root를 만들고 해당 Root를 반환한다. 반환된 Root의 render() 함수를 통해 React Element를 DOM으로 렌더링 할 수 있다.

options에는 2가지 매개변수를 사용할 수 있다.

• onRecoverableError: <FUNCTION> : 렌더링 중 오류가 발생한 경우 호출하는 함수를 설정한다.
• identifierPrefix: <STRING> : Default로 React.useId에 의해 생성된 ID를 사용하는데, 생성된 ID 앞에 설정된 <STRING>을 덧붙여준다. 동일 페이지에 여러 루트를 사용할 때 발생할 수 있는 충돌을 회피하는데 유용하다.

생성된 Root는 unmount()로 해제할 수 있다.

Fiber(work) 📌

React Rendering/Update의 가장 작은 단위.
효율적인 업데이트를 위해 아래와 같은 조건을 갖는다.

• 작업을 중지하고, 필요 시 다시 시작할 수 있어야 한다.
• 다양한 작업에 우선 순위를 부여할 수 있어야 한다.
• 이미 완료된 작업을 재사용 할 수 있어야 한다.
• 더 이상 필요 없게 된 작업을 중단할 수 있다.

차일드, 시블링(자매), 리턴(부모)
(트리탐색방식 중 왼쪽부터 탐색하는 방식

render()

렌더 함수는 아래 두가지 phase로 이루어진다.

• Render phase
  업데이트를 수행하여 화면을 변경하는 것
• Commit phase
  변경된 화면을 실제 브라우저에 나타내는 것

📌 참조

• https://ko.reactjs.org/
• 강병진 강사님 강의