React는 어떻게 동작하는 것일까?

React가 어떻게 동작하는지에 대해서 막연하게나마 알고 있었지만 정확히 어떤 과정을 거쳐서 동작하는지에 대해 한번 알아 보겠습니다.

CRA를 통해 React 프로젝트를 생성한 후 생기는 index.js를 한 번 보겠습니다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

React의 기본적인 동작은 ReactDom.createRoot(element)에 의해 이루어 진다고 볼 수 있습니다. html내의 원하는 element를 지정하여 그 element의 자식요소로 <App /> 컴포넌트를 가지게끔 합니다. 이러한 일련의 과정 속에 숨어있는 기능들을 알아 보도록 하겠습니다.

초기 렌더링

1. <App /> 컴포넌트가 root.render에 전달 됩니다.
2. 우리는 function Component를 이용하게 됩니다. 그럼<App /> 안에 있는 컴포넌트들을 불러서 함수를 실행하고 다시 그 컴포넌트의 함수를 실행하는 재귀적인 방법으로 실행이 됩니다.

state의 변경 사항 때문에 리렌더링이 필요해진다면?

1. 변경된 <App /> 컴포넌트가 root.render에 전달됩니다.
2. 그럼 ReactDom 내부에서 이전의 Dom 트리와 변경사항이 적용된 VirtualDom을 비교하여 바뀐 부분만 적용하여 새로운 Dom 트리를 만드는 Reconcilation 과정을 거치게 됩니다.

일단 렌더링 측면에서 React가 동작하게 되는 일련의 과정을 한번 알아 보았습니다. 다음에는 좀 더 심도있게 hook이나 batch와 관련하여 한번 알아보도록 하겠습니다.