렌더링 그리고 커밋

원문 https://ko-react-exy5xcwjj-fbopensource.vercel.app/learn/render-and-commit

주방에서 요리사가 컴포넌트를 재료로 맛있는 요리를 한다고 상상해보세요. 이 시나리오에서 React는 고객들의 요청을 받고 주문을 가져오는 웨이터입니다. 이 과정에는 UI를 요청하고 제공하는 세 가지 단계가 있습니다.

1. 렌더링 트리거 (손님의 주문을 주방으로 전달)
2. 컴포넌트 렌더링 (주방에서 주문 준비하기)
3. DOM에 커밋 (테이블에 주문한 요리 내놓기)

1단계: 렌더링 트리거

컴포넌트 렌더링이 일어나는 데에는 두 가지 이유가 있습니다.

1. 컴포넌트의 초기 렌더링인 경우
2. 컴포넌트의 state가 업데이트된 경우

초기 렌더링

앱을 시작할 때 초기 렌더링을 트리거하는 과정은 다음과 같습니다.

1️⃣ 대상 DOM 노드를 선택

• React 앱을 렌더링할 HTML 요소(예: <div id="root"></div>)를 선택해야 함.

2️⃣ createRoot를 호출

• 선택한 DOM 노드를 React의 createRoot에 전달하여 루트를 생성.

3️⃣ render 메서드 호출

• 생성된 루트에서 render 메서드를 호출하여 React 컴포넌트를 렌더링.

https://codesandbox.io/embed/lvpwwg?view=editor+%2B+preview&module=%2Fsrc%2Findex.js