(이어서)

렌더링 그리고 커밋

• 컴포넌트는 화면에 표시되기 전에 React에서 렌더링 해야 한다. (Virtual DOM)

  ⇒ 코드가 어떻게 실행되고, React의 렌더링 동작하는지 알게 됨

ex) 주방 → 고객까지 가는 과정

1. 손님의 주문을 주방에 전달 (렌더링 트리거)
2. 주방에서 주문받은 걸 준비 (컴포넌트 렌더링)
3. 주문한 요리를 손님 테이블에 두기 (DOM에 커밋)

1단계: 렌더링 트리거

렌더링 발생하는 데는 두 가지 이유가 있음

1. 컴포넌트가 처음 렌더링 하는 경우

   • createRoot + render를 사용하면 컴포넌트의 첫 번째 렌더링이 실행된다.

     import App from './App';
     import { createRoot } from 'react-dom/client';
     
     const root = **createRoot**(document.getElementById('root'))
     root.**render**(<App />);
     

2. 컴포넌트의 State(혹은 상위 요소 중 하나)가 업데이트 되는 경우 (리렌더링)

   • useState의 두 번째 인자인 set함수로 state를 업데이트해서 리렌더링을 발생시킨다.
     • state가 업데이트되면 자동으로 렌더링 동작이 대기열에 추가된다

2단계: React 컴포넌트 렌더링