리액트에서 "렌더링(rendering)"은 어떤 의미인가요?

Question

안녕하세요 HTML, CSS, javascript 기초를 공부한 뒤 이제 막 React를 배우고 있는 웹 프론트엔드 취준생입니다.

렌더링이라는 단어가 프론트엔드 개발에 있어서 범용적으로 쓰이는 단어인 것 같습니다. HTML을 공부할 때  브라우저의 렌더링에 대해 배웠는데요, React를 공부하다 보니 렌더링, 리렌더링 등 다시한번 렌더링이 나와서 브라우저의 렌더링과 React의 렌더링의 차이는 무엇인지 궁금해졌습니다.

브라우저 렌더링은 HTML, CSS를 파싱한 Render Tree를 Layout과 Paint 단계를 거쳐 브라우저 화면에 보여주는 것으로 이해했습니다. React에서 렌더링은 어떤 작업을 하는 것일까요? State가 변경되면 컴포넌트가 렌더링된다는 사실은 알지만 무엇을 렌더링하는 것인지 궁금합니다.

감사합니다.

성원 · Accepted Answer

안녕하세요:)

공식문서를 참고해서 간략하게 답변해보겠습니다.

리엑트는 렌더링과정을 통해 실제 브라우저 DOM을 업데이트할 범위를 결정하고 반영합니다. 
여기서 렌더링과정은 Trigger, Render, Commit 단계로 나뉩니다. (참고: 리엑트 공식문서, https://beta.reactjs.org/learn/render-and-commit)

Trigger
렌더링을 유발합니다. 앱 시작 초기(initial render) 또는 state의 변경이 있을 때(re-render)에 해당합니다.

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

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

| 리액트에서 렌더링(rendering)은 어떤 의미인가요? 
-> 브라우저 DOM을 직접적으로 수정하는 비용을 줄이기 위해 React에서 수행하는 작업이며 브라우저 DOM을 업데이트할 범위를 결정하고 반영하는 과정. 이렇게 요약할 수 있을 것 같습니다.

React의 렌더링은 깊게 공부할수록 좋은 주제인 것 같습니다. 관련된 내용에 대해 시간을 내서 찾아보는것을 추천드립니다.