Render and Commit

박재현·2024년 2월 20일

React nomadcoder nomadstudy

Nomadcoder React Study 4기

목록 보기

5/49

컴포넌트를 화면에 표시하기 이전에 React에서 렌더링을 해야한다.
이 과정을 이해하면 코드가 어떻게 실행되는지 이해할 수 있고 React 랜더링 동작에 대해 알아볼 필요가 있지 않을까?

주방에서 쉐프가 컴포넌트를 재료삼아 요리를 한다고 상상할때, React는 고객들의 요청을 받고 주문을 가져오는 웨이터다(헬스키친의 마리노?).
그리고 이 과정에서 UI를 요청하고 제공하는 3가지 단계가 있다.

렌더링 트리거 (손님의 주문을 주방으로 전달)
컴포넌트 렌더링 (주방에서 주문을 확인함)
DOM에 커밋 (테이블에 주문한 요리 내놓기)

Step1. Trigger a render

컴포넌트가 렌더링이 일어나는 데에는 2가지 이유가 있는데,
1. 컴포넌트의 첫 렌더링인 경우 (initial render)
2. 컴포넌트의 state(또는 상위 요소 중 하나)가 업데이트된 경우

Inital render

앱을 시작하기 위해서는 첫렌더링을 트리거해야하는데, 프레임워크와 샌드박스가 가끔 코드를 숨기지만, DOM 노드로 createRoot를 호출한 다음 컴포넌트로 render 메소드를 호출하면 된다.

import Image from './Image.js';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'))
root.render(<Image />);

여기서 root.render(<Image />);를 주석처리 하면 컴포넌트가 사라지게 된다. (렌더링 안하니까)

Re-render when state updates

컴포넌트가 처음 렌더링이 되고나면 set함수로 state를 업데이트해 rendering을 트리거할 수 있다.
컴포넌트의 state를 업데이트하면 자동으로 렌더링 queue에 추가된다. (식당에서 밥먹다 음료수를 추가로 주문하는 모습?)

Step2. React render components

렌더링을 트리거하면, React는 컴포넌트를 호출해 화면에 표시할 내용을 파악한다. "랜더링"은 React가 Component를 호출하는 것으로, Application의 current state와 props를 기반으로 UI를 표시하는 것이라고 생각된다.

Initial Render에서 React는 root component를 호출한다.
이후 발생되는 렌더링에서 React는 state update에 의해 렌더링이 발동된 함수 컴포넌트를 호출한다.

(이 과정은 재귀적이라 업데이트된 컴포넌트가 다른 컴포넌트를 반환하면, React는 다음으로 해당 컴포넌트를 렌더링하고 해당 컴포넌트도 또 컴포넌트를 반환하면 반환된 컴포넌트를 다음에 렌더링하는 방식)

export default function Gallery() {
  return (
    <section>
      <h1>Inspiring Sculptures</h1>
      <Image />
      <Image />
      <Image />
    </section>
  );
}

function Image() {
  return (
    <img
      src="https://i.imgur.com/ZF6s192.jpg"
      alt="'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals"
    />
  );
}

위 코드로 예를들면

첫렌더링(initial render)을 하는 동안 React는 <section>, <h1>, <img> 3개의 태그에 대한 DOM 노드를 생성하고
Re-rendering 하는 동안 React는 이전 렌더링 이후 변경된 속성을 계산한다. (계산말할뿐 여기서는 아무런 작업도 수행하지 않음!!)

Step3. React가 DOM에 변경사항을 커밋

컴포넌트를 렌더링(호출)한 후 React는 DOM을 수정한다.

Initial render의 경우 React는 appendChild() DOM API를 사용해 생성한 모든 DOM 노드를 화면에 표시한다
Re-rendring의 경우 React는 필요한 최소한의 작업(바로 이전 단계에서 계산한 변경된 부분들)을 적용해 DOM이 최신 렌더링 출력과 일치하도록 함
커밋단계에서 side effects를 실행할 수 있고, 스케쥴 업데이트도 가능함