[React] 리액트의 렌더링 구조

리액트 렌더링?

React는 UI를 업데이트하고 유지하는 효율적인 방식을 제공하는 라이브러리이다. 렌더링은 React에서 컴포넌트의 상태(state) 또는 props가 변경될 때 UI를 업데이트하는 과정이다. React의 렌더링은 클래스형 컴포넌트와 함수형 컴포넌트에서 다르게 동작하여 각각 동작 원리를 알아보아야 한다. 최근에는 함수형 컴포넌트를 지향하고 있으며 공식 문서에서도 함수형 컴포넌트 방식을 권장한다.

 

렌더링 프로세스

1. 렌더링 촉발(Triggering a Render)
2. 컴포넌트 렌더링(Rendering the Component)
3. DOM에 커밋(Committing to the DOM)

리액트 공식 문서에서는 아래와 같은 비유로 설명하고 있다.

렌더링 촉발: 손님의 주문을 주방으로 전달하는 단계입니다.
컴포넌트 렌더링: 주방에서 주문을 준비하는 단계입니다.
DOM에 커밋: 준비된 음식을 테이블에 내놓는 단계입니다.

 

1단계 : 렌더링 촉발

컴포넌트를 렌더링하는 두 가지 주요 이유는 다음과 같다.

초기 렌더링

애플리케이션이 시작될 때 컴포넌트의 첫 렌더링이 필요합니다. 예를 들어, createRoot와 render 메서드를 호출하여 컴포넌트를 화면에 표시합니다.

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

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

상태(state) 또는 props 변경

컴포넌트의 상태나 상위 컴포넌트의 props가 변경될 때, React는 자동으로 리렌더링을 대기열에 추가합니다.

공식 문서의 글에서는 상태 또는 props 변경을 아래와 같이 비유했다.
"이것은 식당에서 손님이 첫 주문 이후에 갈증이 나거나 배고파져서 차, 디저트 등을 추가로 주문하는 모습으로 상상해 볼 수 있습니다."

state update -> triggers -> render

예시 코드

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

 

2단계 : 컴포넌트 렌더링

렌더링이 촉발되면 React는 컴포넌트를 호출하여 화면에 표시할 내용을 확인한다. 리액트에서 렌더링은 컴포넌트를 호출하는 것이다.

 

컴포넌트 호출

초기 렌더링에서는 루트 컴포넌트가 호출되며 이후 리렌더링에서는 상태 업데이트를 트리거한 컴포넌트가 호출된다.

재귀적 렌더링

 컴포넌트가 다른 컴포넌트를 반환하면 React는 그 컴포넌트도 렌더링한다. 이 과정은 모든 중첩된 컴포넌트가 렌더링될 때까지 계속된다.

예시 코드

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

function Image() {
  return (
    <img
      src="https://i.imgur.com/ZF6s192.jpg"
      alt="Flower"
    />
  );
}

 

 

3단계 : DOM에 커밋

렌더링 단계가 완료되면 React는 DOM에 변경 사항을 적용한다.

 

• 초기 렌더링: appendChild() DOM API를 사용하여 모든 DOM 노드를 화면에 추가한다.
• 리렌더링: React는 렌더링 동안 계산된 최소한의 변경 사항만을 실제 DOM에 적용한다. 이렇게 함으로써 불필요한 DOM 업데이트를 피하고 성능을 최적화한다.

공식 문서의 설명
React는 렌더링 간에 차이가 있는 경우에만 DOM 노드를 변경한다. 예를 들어 매초 부모로부터 전달된 다른 props로 다시 렌더링하는 컴포넌트가 있다. <input>에 텍스트를 입력하여 value를 업데이트 하지만 컴포넌트가 리렌더링될 때 텍스트가 사라지지 않는다.

 

참고문헌

빠르게 시작하기 – React

리액트의 렌더링은 어떻게 일어나는가?