컴포넌트가 스크린에 등장하기 전에, 리액트에서 렌더링되어야 합니다. 해당 스탭을 이해하기 위해서는 당신의 코트가 어떻게 동작하는지 행동에 대해서 먼저 설명이 필요합니다.

컴포넌트를 주방에에서 요리하는 음식이라고 생각해보세요. 맛있는 접시과 재료들이 있습니다. 다음과 같은 시나리오에서 리액트는 웨이터입니다. 바로 손님들에게 요청을 받아 주문을 수행하는 역할을 수행합니다. 이 프로세스는 UI를 서빙하는데 세가지 프로세스 스탭을 밟습니다.

1. 렌더링을 트리거합니다.
2. 컴포넌트를 렌더링합니다.
3. Dom에 commit 합니다.

Step1. Trigger a render

컴포넌트 두 가지 원인을 통해 렌더링됩니다.

1. 컴포넌트의 첫번째 렌더링

   — 어플레케이션이 처음 실행되는 initial render이 수행됩니다. createRoot 를 통해 target이 되는 돔 노트에서 render 메소드를 실행합니다.

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

2. 컴포넌트(혹은 조상의 첫번째)에 대한 상태 업데이트

   • 컴포넌트가 초기 렌더링되면, 상태 변경시마다 set function 이 수행됩니다.
   • 컴포넌트 상태는 que 에 들어 간 상태를 기반으로 자동으로 업데이트되고 렌더링됩니다.

Step2: 리액트는 컴포넌트를 렌더링합니다.

렌더링이 트리거 된 이후 Screen에 나오는 과정을 redering이라고 합니다.

• on initial render — 리액트는 root 컴포넌트를 호출합니다.
• For subsequent renders, — 리액트는 함수 컴포넌트를 호출하고 렌더링을 트리거합니다.

이러한 프로세스를 재귀적으로 동작합니다. 만약 업데이트 된 컴포넌트가 다른 컴포넌트를 반환하면, 리액트는 그 다음 컴포넌트들을 다시 랜더링합니다.

Step3: 리액트는 Dom을 commit 합니다.