[React] 렌더링과 커밋

귤티·2025년 4월 28일

front

목록 보기

6/10

렌더링과 커밋

컴포넌트를 화면에 표시하기 이전에 React에서 렌더링을 해야 한다.

UI를 요청하고 제공하는 3가지 단계
1. 렌더링 트리거
2. 컴포넌트 렌더링
3. DOM에 커밋

렌더링 트리거

컴포넌트 렌더링이 일어나는 2가지 이유
1. 컴포넌트의 초기 렌더링인 경우
앱을 시작할 때 초기 렌더링을 트리거해야 한다.
프레임워크에서는 아래 코드가 숨겨지곤 하지만, 대상 DOM 노드와 함께 createRoot를 호출한 다음 해당 컴포넌트로 render 메소드를 호출하면 작업이 완료된다.

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

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

컴포넌트의 state가 업데이트된 경우
컴포넌트가 처음으로 렌더링된 후에는 set 함수를 통해 상태를 업데이트하여 추가적인 렌더링을 트리거할 수 있다.
컴포넌트의 상태를 업데이트 -> 자동으로 렌더링 대기열에 추가

React 컴포넌트 렌더링

렌더링을 트리거한 후 React는 컴포넌트를 호출하여 화면에 표시할 내용 파악
"렌더링"은 React에서 컴포넌트를 호출하는 것

초기 렌더링에서 React는 루트 컴포넌트를 호출
이후 렌더링에서 React는 state 업데이트가 일어나 렌더링을 트리거한 컴포넌트를 호출

재귀적 단계: 업데이트된 컴포넌트가 다른 컴포넌트를 반환하면 React는 다음으로 해당 컴포넌트를 렌더링하고 해당 컴포넌트도 컴포넌트를 반환하면 반환된 컴포넌트를 다음에 렌더링하는 방식
중첩된 컴포넌트가 더 이상 없고 React가 화면에 표시되어야 하는 내용을 정확히 알 때까지 단계가 계속된다.

다음 예시에서 React는 Gallery()와 Image()를 여러 번 호출

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="어쩌고"
        />
    );
}

초기 렌더링 하는 동안 React는 ₩<section₩>, ₩<h1₩>, 3개의 ₩<img₩> 태그에 대한 DOM 노드 생성
리렌더링 하는 동안 React는 이전 렌더링 이후 변경된 속성을 계산, 커밋 단계까지는 해당 정보로 아무런 작업 수행하지 않는다.

렌더링 -> 항상 순수한 계산