리액트의 렌더링 프로세스와 동작 원리
리액트는 Virtual DOM을 이용해 DOM 업데이트를 효율적으로 처리하는 자바스크립트 라이브러리입니다. 이 글에서는 리액트가 어떻게 페이지를 렌더링하고 상태 변화에 따라 업데이트하는지 그 과정을 정리합니다.
리액트 렌더링의 기본 개념
- 리액트는 컴포넌트 기반 구조로 구성되며, UI를 작은 단위로 나눠 관리합니다.
- Virtual DOM을 사용해 실제 DOM 조작을 최소화하며 성능을 최적화합니다.
- 리액트는 렌더링 과정에서 Render Phase와 Commit Phase로 나누어 동작합니다.
리액트 렌더링 과정 요약
- Render Phase 컴포넌트가 변경될 때마다 새로운 Virtural DOM이 생성됩니다. 이전에 생성되었던 Virtual DOM과 새로운 Virtual DOM을 비교하게 됩니다.
- Commit Pahse 비교 작업이 끝나면 변경 사항을 Actual DOM에 반영해 사용자가 보는 화면을 업데이트 합니다
리액트 렌더링 과정의 구체적인 흐름
리액트는 아래와 같은 구조 덕분에 빠르고 효율적인 사용자 인터페이스를 제공할 수 있게 됩니다.
- Render Phase
- React 컴포넌트를 호출하게 되면, 컴포넌트 내용을 담고 있는 객체인 React Element가 반환됩니다. 반환된 React Element들은 트리 형태를 만들어 Virtual DOM을 생성하게 됩니다. ( Virtual DOM은 React Element의 객체값으로 표현된 UI라고 할 수 있다. )
- Render Phase에서 새로운 Virtual DOM을 생성하고, Diffing Algorithm을 통해 이전 Virtual DOM과 비교합니다.
- 비교 후, 변경된 부분을 찾아서 Virtual DOM에 업데이트 합니다. (= Reconciliation 조정)
- Commit Phase Reconciliation작업을 통해 가상돔이 업데이트 되면, 그 사항을 실제 Actual DOM에 반영하고, 최종적으로 사용자에게 보이는 부분이 업데이트가 됩니다.
출처 : 이정환 _ React.js렌더링 방식 살펴보기 / NERDINARY CONF 2023
코드로 보는 리액트 렌더링 동작 요약
- index.html은 리액트 애플리케이션이 시작되는 진입점입니다.
- main.tsx파일은 컴포넌트를 렌더링하며 각 컴포넌트는 리액트의 상태 변화에 따라 UI를 동적으로 업데이트 합니다.
코드로 보는 구체적인 렌더링 동작
1. 리액트의 진입접 : index.html 파일
Vite로 React프로젝트 세팅을 시작하면, 위와 같이 프로젝트 root에 index.html이 생성됩니다. 이 파일은 리액트 애플리케이션이 실행되는 유일한 HTML입니다.
// root의 index.html
<html lang="en">
<head> ... </head>
<body>
**<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>**
</body>
</html>
브라우저는 HTML, CSS, JavaScript만 이해할 수 있기 때문에 리액트 애플리케이션의 코드는 이 index.html 파일을 거쳐 브라우저에 표시됩니다. 이것은 리액트 프로젝트가 단 하나의 index.html파일로 동작한다는 것을 의미하며 여기서부터 SPA의 구조가 시작됨을 알 수 있습니다.
2. index.html 파일의 <div id="root"></div>와 src/main.tsx
위의 코드에서 <div id="root"></div>는 리액트가 렌더링 할 공간을 제공합니다. index.html의 스트립트 태그가 src/main.tsx를 로드하면 아래와 같은 코드가 실행됩니다.
// src/main.tsx ... import 생략
const router = createBrowserRouter([
{
path: '/',
element: <App />,
children: [
{ index: true, path: '/', element: <Home /> },
{ path: '/login', element: <Login /> },
{ path: '/products/new', element: <ProductsUpload /> },
],
},
]);
createRoot(document.getElementById('root')!).render(
<StrictMode>
<RouterProvider router={router} />
</StrictMode>,
);
- createRoot() 호출
브라우저 DOM안에 콘텐츠를 표시할 수 있는 React 루트가 생성됩니다. 이는<div id="root"></div> 가 React애플리케이션과 연결되는 html이 된 것입니다. - render()가 호출되면, 컴포넌트(App)가 ReactElement로 변환됩니다. 이 ReactElement는 자바스크립트 객체로서 Virtual DOM을 구성하는 기본 요소가 됩니다. RouterProvider가 주입되어 SPA 구조로 페이지를 관리하게 됩니다.
- 이후 컴포넌트에 변경이 발생하면 새로운 ReactElement객체가 생성되어 Virtual DOM을 만들게 됩니다. 리액트는 새로운 Virtual DOM과 이전 Virtual DOM과 비교(Diffing)하여 변경 사항을 찾고, 필요한 부분을 업데이트 하게 됩니다.
결론 & Think : 리액트는 Virtual DOM을 이용해 효율적으로 렌더링 한다.
- 리액트는 컴포넌트 기반 구조로 UI를 구성합니다. 컴포넌트가 업데이트 될 때마다 Render Phase와 Commit Phase의 과정을 거쳐 렌더링 하며, Virtual DOM을 사용해 실제 DOM 조작을 최소화하며 성능을 최적화합니다.
Thinking
React의 동작 원리에 대해 자세히 알아보는 시간을 가져봤다. 리액트를 사용해 프로젝트를 만들어봤음에도 컴포넌트가 ReactElement 객체로 반환되어 Virtual DOM이 된다는 사실이 굉장히 낯설게 느껴졌다. 내가 놓치고 사용했던 부분이 많았다는 사실을 알게 됐다!!! 하지만 글을 정리하면서 내가 알고 있는 지식들이 조금씩 선을 이어가는 기분이 들었다.
개발자는 내가 작성한 프로그램이 어떻게 동작하는지 알고 있어야 했는데! 지금에서야 시작한 것 같아서 약간 부끄러운 느낌이 든다. 내가 작성한 코드가 무엇을 바탕으로 동작하고 있는지, 어떤 원리에서 실행되고 있는지 알아볼 수 있는 유익한 시간이 되어 무척 뜻깊다!
‘왜 이렇게 되는걸까?’ 혹은 ‘이건 이래서 이런걸까?’와 같은 물음표를 많이 가져보지 않았구나! 하는 반성과 함께 조금씩 시간을 내어서 물음표와 느낌표를 많이 만들어야겠다!!!!!!!
reference
https://www.youtube.com/watch?v=N7qlk_GQRJU&list=PLP9rTp6fX1uXpZpy5gh2lt8pWEhwx-Jry
'개발공부_Blog > React.js' 카테고리의 다른 글
| axios로 API 호출해서 Data받아오기 (0) | 2022.09.04 |
|---|---|
| try catch 에러핸들링 (0) | 2022.09.04 |
| async - await 비동기 작업 (0) | 2022.09.04 |
| SCSS 문법 (Nesting) (0) | 2022.09.04 |
| SASS, SCSS란 (0) | 2022.09.04 |
댓글