[React] React 동작원리 (React Dom)

김채운·2023년 8월 6일

목록 보기

19/26

면접에서 React Dom의 작동 원리에 대해서 질문을 받았는데,,, virtual Dom이랑 Dom만 공부하고 ReactDOM이 그 과정에서 어떻게 동작하는지에 대해서는 모르고 있었다. React 사용하면서 React Dom 학습도 안 되어있는 내 자신에 충격 받고 오늘 정리를 통해 React 동작 원리를 제대로 학습하고자 한다!!

➡️ React Dom

React Dom은 React에서 사용되는 가상돔(virtual Dom)을 브라우저의 실제 Dom에 동기화시키는 역할을 담당하는 라이브러리 이다.

1. ReactDOM은 웹의 인터페이스다. 실제 HTML요소를 화면에 불러오는 역할을 한다.

2. ReactDOM은 브라우저의 일부인 Real DOM을 다룬다. 그래서 ReactDOM은 유저가 보는 화면에 무슨 내용을 띄울지 정한다.

3. ReactDOM은 차이점을 받고, Real DOM을 조정한다.

브라우저가 이해할 수 있는 것은 html, css, javascript 뿐이다. 그래서 React에서 사용하는 jsx문은 바벨을 사용해서 순수 자바스크립트로 변환되어 진다. 그 다음에 React에서 만든 컴포넌트를 html과 연결하는 작업을 해줘야 하는데 이 작업을 도와주는 것이 React Dom이다. 그래서 최종적으로 사용자들에게 배포되어지는 파일은 index.html이 되는 것이다.

➡️ React 작동원리

1. Component 생성

React의 애플리케이션은 컴포넌트로 구성된다. 컴포넌트는 사용자의 인터페이스를 나타내는 재사용 가능한 모듈로서, JavaScript클래스 또는 함수로 정의된다.

2. Render 메서드 호출

React는 렌더링할 컴포넌트를 찾고 해당 컴포넌트의 'render'메서드를 호출한다. 'render'메서드는 해당 컴포넌트가 어떻게 렌더링 될지를 정의하는 JSX코드를 반환한다.

3. VirtualDOM 생성

컴포넌트가 렌더링되면, 반환된 JSX를 기반으로 컴포넌트의 가상돔(VirtualDOM)을 생성한다. 가상돔은 메모리에 존재하며, 실제 DOM과 유사한 구조를 가지고 있다.

4. 사용자 상호작용 처리

React는 사용자가 애플리케이션과 상호작용하면, 예를들어 사용자의 입력(클릭, 키 입력 등)에 응답하여 컴포넌트의 상태를 업데이트 하고, 그렇게 되면 컴포넌트의 상태가 변경된다. 이에 따라 다시 렌더링을 수행한다. 이때 가상 DOM 비교 과정이 시작되고, 변경된 부분을 파악한다. 이러한 상호작용 처리를 통해 동적인 사용자 인터렉션을 구현할 수 있다.

5. VirtualDOM 비교

상태가 변경되면 React는 해당 컴포넌트를 다시 렌더링하고, render 메서드가 다시 호출된다. 이 때, 변경된 상태를 반영한 새로운 JSX를 기반으로 새로운 가상 DOM이 생성되고, React는 이전 가상돔과 새로운 가상돔을 비교한다. 이를 통해 변경된 부분을 파악하고, 최소한의 DOM 조작을 수행할 수 있다.

6. Diffing(차이비교)

React는 이전 가상돔과 새로운 가상돔을 비교하는 과정(Reconciliation)에서 변경된 부분을 파악한다. 이 과정에서 변경된 컴포넌트 또는 엘리먼트를 찾아내고, 변경 사항을 반영할 필요가 있는 부분을 확인한다. 그리고 어떤 DOM 엘리먼트가 어떻게 변경되어야 하는지를 계산한다. 이 과정은 최소한의 DOM 조작만을 수행하여 성능을 최적화합니다.

7. 실제돔 업데이트 (ReactDOM 사용)

Diffing과정을 통해 변경이 필요한 부분이 파악되면, React는 이러한 변경 사항을 실제돔에 반영한다. 이때, ReactDOM이 등장한다. ReactDOM은 변경 사항이 있는 돔엘리먼트만을 업데이트 하고, 실제돔에 반영한다. 이 과정을 통해 최소한의 DOM 조작만을 수행하여 성능을 최적화한다.

9. 렌더링 결과 출력

최종적으로 React는 가상 DOM과 실제 DOM의 비교 및 업데이트를 거친 후 ReactDOM을 통해 실제돔에 반영된 컴포넌트들을 화면에 출력하여 사용자에게 보여준다.

이러한 과정을 통해 React는 빠른 성능과 효율적인 UI 업데이트를 제공하면, 개발자들이 간편하게 사용자 인터페이스를 구현할 수 있게 도와준다.

➡️ React Dom 작동원리

React는 컴포넌트 기반의 UI 라이브러리로, 사용자 인터페이스를 작성할 때 컴포넌트들을 조합하여 구성한다. 이때 컴포넌트들을 Javascript객체로서 가상돔에 존재하게 된다.

가상돔은 브라우저의 실제돔과 일치하게 구조를 유지하면서도 실제돔보다 가벼우며, 변경된 부분만을 효율적으로 감지할 수 있다. React는 컴포넌트들의 상태 변화를 감지하고, 변경된 부분을 가상돔에 반영한다. 그리고 React Dom은 이 가상돔과 실제돔을 비교하여 변경된 부분만을 실제돔에 업데이트하는 역할을 수행한다. 이를 통해 브라우저의 리렌더링을 최소화하여 성능을 향상시킨다.

간단히 말해, React Dom은 React 애플리케이션의 가상돔과 실제돔을 관리하여 효율적인 UI렌더링을 지원하는 역할을 수행하는 라이브러리이다.

💡 React 컴포넌트가 index.html에 연결되어 지는 과정.

index.html파일

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>React App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <div id="modal"></div>
</body>

</html>

위의 index.html파일을 보면 body태그 안에

<div id="root"></div>

root를 id로 한 div태그 코드가 있는데 이 부분에 이제 React에서 만든 컴포넌트를 연결해줄 건데 이것을 가능하게 하는 것이 ReactDOM이다.

index.js파일

index.js 파일을 보면,

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./redux/configStore";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);

reportWebVitals();

위의 index.js파일의 코드를 이해하면 ReactDOM이 DOM을 업데이트 한다는 말을 이해할 수 있다.

createRoot(container[,options]);
createRoot 메서드는 container 요소를 인자로 받아 root를 반환한다. 이 반환받은 root를 render 메서드와 함께 사용하면, React 요소를 DOM에 렌더링 할 수 있다고 공식문서에 나와있다.

const root = ReactDOM.createRoot(document.getElementById('root'));

그래서 이 코드를 보면 매개변수 container에 id가 root인 요소가 인자로 들어간다. 이는 index.html 파일의 body 안에 id가 root인 div를 가리키는 것이다. 👇

<div id="root"></div>

이 root가 id인 div 태그를 통해 DOM에 접근하는 것이다.

root.render(element);
render의 역할은 이름 그대로 렌더링이다. 렌더링 할 요소를 인자로 받아 컴포넌트(root)에 렌더링한다.

root.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);

index.js의 이 부분은 root 요소에 App컴포넌트를 렌더링하는 것이다. 즉, 우리가 작성한 컴포넌트들은 render 메서드를 통해 id가 root인 div 안에 렌더링이 된다.

React의 컴포넌트들은 이런 과정을 통해 사용자가 보는 브라우저 화면을 구성하고 작동하게 한다.
그래서 항상 index.js 파일에서 연결을 해주고,
실제로 우리가 컴포넌트를 만들어나갈 때는 app.jsx에서부터 시작하면 된다.

출처

김채운

이전 포스트

[React] Redux-toolkit

다음 포스트