React 렌더링(간단버전)

렌더링이란?

리액트에서 렌더링(Rendering)은 컴포넌트 함수를 실행하여 새로운 UI 구조를 계산하는 과정이다.
렌더링이 발생했다고 해서 실제 브라우저 화면이 항상 변경되는 것은 아니다.

리액트는 이전에 계산한 결과와 새롭게 계산한 결과를 비교한 뒤, 변경된 부분이 있을 때만 실제 DOM을 업데이트한다.

---

언제 렌더링이 발생할까?

다음과 같은 상황에서 렌더링이 발생한다.

• State 변경: useState 등으로 관리하는 상태(State)가 변경될 때
• Props 변경: 부모 컴포넌트로부터 전달받은 Props가 변경될 때
• 부모 컴포넌트의 재렌더링: 자신의 State나 Props가 변경되지 않았더라도 부모 컴포넌트가 다시 렌더링되면, 자식 컴포넌트도 기본적으로 함께 렌더링된다.
• Context 값 변경: useContext로 구독 중인 Context의 값이 변경되면 해당 Context를 사용하는 컴포넌트가 다시 렌더링된다.

---

렌더링 과정

렌더링 트리거가 발생하면 React는 Render 단계와 Commit 단계를 거쳐 화면을 업데이트한다.

 

① Render 단계 (계산)

이 단계에서는 실제 화면을 변경하지 않고, 어떤 부분을 변경해야 하는지 계산한다.

1. 컴포넌트 함수 실행: 렌더링이 필요한 컴포넌트 함수를 실행한다.
2. 새로운 Virtual DOM 생성: 실행 결과를 바탕으로 새로운 Virtual DOM을 만든다.
3. 비교(Diffing): '이전 가상 DOM'과 '새 가상 DOM'을 비교하여 변경된 부분을 찾는다.

② Commit 단계 (적용)

Render 단계에서 변경 사항을 모두 계산했다면, 이를 실제 화면에 반영한다.

1. DOM 업데이트: 변경된 부분만 실제 DOM에 반영한다.
2. 브라우저 화면 갱신(Painting): 브라우저가 변경된 내용을 화면에 그려 사용자에게 보여준다.

 

---

4. 렌더링과정 한눈에 보기

State 변경
Props 변경
Context 변경
↓
Render 단계
(컴포넌트 실행)
↓
가상 DOM 생성
↓
Diffing
↓
Commit 단계
↓
실제 DOM 업데이트
↓
브라우저 Paint