렌더링과 커밋

리액트의 기본 개념들을 하나씩 정리해보려고 한다. 어렴풋이 혹은 잘 몰랐던 부분들이 명확해졌으면 좋곘다.

렌더링

React가 화면을 그리기 위해서는 렌더링 과정이 필요하다. 이는 흔히 브라우저 렌더링과 같다고 생각할 수 있지만 아니다. React의 렌더링과 브라우저 렌더링은 다르다. React의 렌더링은 React가 컴포넌트(함수형)를 호출하는 것을 말한다. 좀 더 정확히는 컴포넌트를 호출하여 반환된 React Element로 VDOM을 재조정하는 것이다. 즉, VDOM 에서 이뤄지는 작업을 말한다.

React가 렌더링을 하려면 트리거가 필요하다. 트리거는 두가지 경우가 있는데 초기 렌더링과 컴포넌트의 state(+ props) 혹은 파생된 상태가 변경되었을 경우이다.

초기 렌더링에 경우 React는 루트 컴포넌트를 호출한다.

ReactDOM.createRoot(document.getElementById("root")!).render(
    <FirstComponent />
);

state가 변경되는 경우 그 state가 속한 컴포넌트를 호출한다. 이 호출은 재귀적으로 이뤄진다. A,B,C라는 컴포넌트가 있고 순서대로 A 는 B 를 반환하고 B는 C를 반환한다고 가정하자. A 의 상태가 변화가 되어 렌더링이 이뤄지면 그 다음으로 B의 렌더링이 이뤄지고 그 다음으로 C 의 렌더링이 이뤄진다.

커밋

커밋은 렌더링 결과를 DOM에 반영하는 과정이다. 초기 렌더링은 appendChild()를 통해 DOM 에 요소를 추가하고 리렌더링(상태 변경 후)에 경우 렌더링 결과가 이전과 다른 부분만 DOM 에 반영한다. DOM에 렌더링 결과가 반영되고 나서 브라우저 렌더링이 이뤄진다.