리엑트 개발을 하다보면, 렌더링이 된다. 상태가 바뀌면 렌더링을 새로 한다.
렌더링이 뭔데..?? 렌더링이 뭔지 알아보자:)
리엑트는 "렌더링과정"을 통해 실제 브라우저 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을 업데이트할 범위를 결정하고 반영하는 과정.
