[React] 리액트에서 Rendering 렌더링이란?

TL;DR

---

• 마운트 : 컴포넌트가 최초로 DOM에 삽입되는 과정. 컴포넌트 생명 주기에서 한 번만 발생
• 렌더 : 컴포넌트를 실행해서 변경사항을 계산(컴포넌트 출력 결정)하는 과정. 새로운 가상 DOM을 생성하고 이 새로운 가상 DOM과 이전 가상 DOM을 비교하여 실제 DOM에 반영할 변경사항 파악
• 커밋 : 렌더 단계를 통해 파악된 변경사항들이 실제 브라우저 DOM에 적용되는 과정

 

렌더링이란

---

일반적으로 렌더링(Rendering)은 아래 2가지 과정을 지칭한다.

 

1. HTML / CSS / JS로 작성된 문서를 해석(파싱)해서 브라우저에 시각적으로 출력하는 과정
2. 서버에서 데이터를 HTML로 변환해서 브라우저에게 전달하는 과정(SSR)

 

반면 리액트에서 말하는 렌더링은 브라우저 DOM 수정 비용을 줄이기 위해 수행하는 작업을 일컫는다. 이 작업을 통해 브라우저 DOM의 업데이트 범위를 결정하고 반영한다. 좀 더 엄밀하게 말하면 props와 state를 기반으로 UI 영역이 어떻게 보이길 원하는지, 컴포넌트에게 설명을 요청하는 리액트 프로세스다.

Rendering is the process of React asking your components to describe what they want their section of the UI to look like now, based on the current combination of props and state

 

렌더링 과정

---

❶ Trigger: 렌더링 유발

앱 시작 초기(initial render) 또는 state 변경이 있을 때(re-render).

 

❷ Render: 컴포넌트를 렌더링하고 변경사항 계산

브라우저 DOM에 반영될 요소를 계산한다. 이 단계에서 브라우저 DOM을 업데이트 하기 전, 가상 DOM을 조작해서 업데이트할 모양을 만들어 낸다. 브라우저 DOM을 직접 조작하는 비용(repaint / reflow)이 크기 때문에 가상 DOM을 통해 업데이트를 미리 실행하는 것. 초기 렌더라면 루트 컴포넌트를 호출해서 전체 엘리먼트에 대한 가상돔을 만들고, 리렌더라면 이전 렌더와 비교해서 변화가 있는 컴포넌트를 호출한다.

 

❸ Commit: 렌더 단계에서 계산된 변경사항을 DOM에 적용

Render 단계를 통해 호출된 컴포넌트들이 브라우저 DOM에 적용되는 단계. 렌더 단계에서 변화가 있었던 부분만 DOM에 마운트되고 라이프사이클을 실행한다.

 

재조정 | Reconciliation

React는 렌더링 프로세스 동안 컴포넌트 트리 전체에서 렌더링 결과물을 수집한다. 그 후 새로운 객체 트리(가상 DOM)와 비교하여 브라우저 DOM을 원하는 출력으로 보이기 위해 모든 변경사항을 수집한다. 리액트에선 이렇게 비교하고 계산하는 과정을 재조정(reconciliation)이라고 부른다.

 

React === value UI

리액트는 값(value) UI다. 즉, UI를 문자열이나 배열과 같은 값으로 보는 개념이다. 값은 변수에 저장하거나 전달하고, 자바스크립트 제어 흐름에서 사용할 수 있다. 이처럼 UI를 값처럼 제어하는 방식이 렌더링 프로세스의 주요 포인트다.

React is “value UI”. Its core principle is that UI is a value, just like a string or an array. You can keep it in a variable, pass it around, use JavaScript control flow with it, and so on. That expressiveness is the point — not some diffing to avoid applying changes to the DOM.
— via Mark’s Dev Blog

 

레퍼런스

---

• (번역) 블로그 답변: React 렌더링 동작에 대한 (거의) 완벽한 가이드
• 리액트에서 "렌더링(rendering)"은 어떤 의미인가요?  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요