React 개념 다시 잡기: 렌더링과 커밋

BinaryWoo_dev·2024년 3월 5일

React

목록 보기

7/8

서론

React에서 앱의 화면을 업데이트하는 프로세스는 다음과 같다.

1. 렌더링 트리거
2. 컴포넌트 렌더링
3. DOM에 커밋 (변경사항 적용)
4. 브라우저 페인트

이번 글에서는 React 에서 렌더링이라는 프로세스를 통해 코드가 어떻게 실행되고 동작하는지 알 수 있을 것이다.

본론

React 프레임워크를 사용하다보면 가장 많이 듣는 용어 중 하나가 바로 '렌더링' 이다. 여기서, 렌더링은 대체 어떤 의미를 가지고 있을까?

🔎 React 에서 렌더링의 의미

React 에서 렌더링이란 다음과 같은 의미를 지니고 있다고 한다.

💡 렌더링이란?

: React가 컴포넌트를 호출하는 행위

🔎 React가 컴포넌트를 렌더링하는 시기와 이유

컴포넌트의 렌더링 이벤트를 발생 시기는 다음과 같이 두 가지 트리거 유형이 있다.

1. 컴포넌트가 초기 렌더링 될 때
2. 컴포넌트 내의 state 또는 부모 컴포넌트로부터 상속받는 prop 이 업데이트 되었을 때 (리렌더링)

초기 렌더링과 리렌더링

💡초기 렌더링

React 앱이 시작되면 가장 먼저 컴포넌트의 초기 렌더링을 트리거해야 한다. 이는 대상 DOM 노드와 함께 createRoot() 을 호출한 후, 컴포넌트와 함께 render 메서드를 호출하여 수행된다.
요약하자면 초기 렌더링은 React가 루트 컴포넌트를 호출하는 것이다.

💡 리렌더링

컴포넌트의 상태(state)를 업데이트하면 렌더링이 자동으로 대기열에 추가된다.

이 렌더링 프로세스는 재귀적으로 실행된다. 즉, 업데이트된 컴포넌트가 다른 컴포넌트를 반환할 경우 React는 해당 컴포넌트를 다음에 렌더링하고 해당 컴포넌트도 무언가를 반환하면 해당 컴포넌트를 다음에 렌더링하는 방식인 것이다. 그러다가 더 이상 중첩된 컴포넌트다 없고 React가 화면에 출력할 컨텐츠가 명확해질 경우 렌더링 프로세스는 종료된다.

예를 들어, 아래의 코드에서는 <Image/> 컴포넌트의 jsx return 구문이 먼저 렌더링 된 후, <Gallery/> 컴포넌트의 return 구문이 최종적으로 렌더링된다.

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"
    />
  );
}

🔎 화면에 컴포넌트를 표시하는 단계

React 가 화면에 컴포넌트를 표시하는 단계는 앞에 서론에서 이야기했던 것처럼 다음과 같다.
React에서 앱의 화면을 업데이트하는 프로세스는 다음과 같다.

1. 렌더링 트리거
2. 컴포넌트 렌더링 (리렌더링)
3. DOM에 커밋 (변경사항 적용)
4. 브라우저 페인트

💡 브라우저 페인트

컴포넌트의 렌더링이 완료되고 React가 DOM을 업데이트한 후 최종적으로 브라우저가 화면을 다시 그리고 칠하는 작업을 수행하는데, 이를 브라우저 페인팅 이라고 한다.

🔎 렌더링이 항상 DOM 업데이트를 생성하지 않는 이유?

React는 렌덜이 간에 차이가 있는 경우에만 DOM 노드를 변경한다. 예를 들어, 다음과 같이 매 초마다 time prop 데이터가 업데이트되어 리렌더링 되는 Clock 컴포넌트가 있다고 가정해보자.

export default function Clock({ time }) {
  return (
    <>
      <h1>{time}</h1>
      <input />
    </>
  );
}

위의 코드가 리렌더링 되었을 때, 일반적으로 생각했을 때는 <Clock/>컴포넌트가 리렌더링되어 return 구문의 모든 jsx Element 요소들이 새로 DOM에 커밋되어 화면 상에서 사라졌다가 다시 출력되어야 할 것이다. 하지만, 실제로는 <h1>...</h1> 태그 요소만 변경되고 나머지 요소들은 그대로 유지되어 출력될 것이다.
그 이유는 리렌더링 전 마지막 JSX 구조에서 <input/> 요소는 변경사항 없이 동일한 자리에 위치해 있으므로 React는 이 요소를 DOM 커밋 대상에서 제외시키기 때문이다.