Post

REACT) 리액트 DOM(React DOM)에 대한 이해와 사용법

Posted Updated
Preview Image
By parksohyunnn 7 min read

리액트 DOM(React DOM)에 대한 이해와 사용법

오늘은 리액트 DOM(React DOM)에 대한 이해와 사용법에 대해 알아보도록 하겠습니다.

리액트 DOM(React DOM)란 무엇인가?

  • 리액트 DOM(React DOM)은 리액트 라이브러리의 핵심 모듈 중 하나로, 리액트 컴포넌트를 실제 DOM(Document Object Model)과 연결하는 역할을 합니다. 리액트는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리로, 컴포넌트 기반의 개발 방식을 채택하여 UI를 구성합니다. 그러나 리액트 컴포넌트는 추상적인 개념이기 때문에 실제 브라우저에서 이를 렌더링하기 위해서는 리액트 DOM이 필요합니다.

  • 리액트 DOM은 리액트 컴포넌트가 브라우저의 실제 DOM에 효율적으로 업데이트되고, 변경 사항이 반영되도록 합니다. 이는 리액트의 가상 DOM(Virtual DOM)과 밀접한 관련이 있습니다. 리액트는 변경 사항을 가상 DOM에 먼저 적용한 후, 이를 실제 DOM과 비교하여 필요한 부분만 업데이트하는 방식으로 성능을 최적화합니다.

리액트 DOM의 주요 기능

  • 업데이트 관리: 가상 DOM을 통해 변경 사항을 감지하고, 최소한의 실제 DOM 업데이트를 수행합니다.
  • 서버 사이드 렌더링: 서버 측에서 리액트 컴포넌트를 렌더링하여 초기 로드 속도를 향상시키고 SEO를 개선할 수 있습니다.

리액트 DOM 사용 방법

리액트 DOM을 사용하기 위해서는 react-dom 패키지를 설치하고, 이를 통해 컴포넌트를 렌더링하는 과정이 필요합니다.

설치

리액트를 사용하기 위해서는 react와 react-dom 패키지를 설치해야 합니다. 다음은 npm을 사용한 설치 명령어입니다.

1

npm install react react-dom

기본 사용법

리액트 DOM을 사용하는 가장 기본적인 예제는 다음과 같습니다.

  1. index.html: 애플리케이션이 렌더링될 HTML 파일입니다.
1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <script src="index.js"></script>
</body>
</html>
  1. index.js: 리액트 컴포넌트를 렌더링하는 자바스크립트 파일입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is a simple React component.</p>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
  • 위 예제에서 ReactDOM.render 메서드는 App 컴포넌트를 index.html 파일의 id가 root인 요소에 렌더링합니다. 이 과정에서 리액트 DOM은 가상 DOM을 사용하여 효율적으로 변경 사항을 관리합니다.

컴포넌트 업데이트

  • 리액트 DOM은 상태(State)와 속성(Props)이 변경될 때마다 컴포넌트를 다시 렌더링합니다. 이를 통해 사용자 인터페이스가 최신 상태를 유지할 수 있습니다.

  • 다음 예제는 버튼을 클릭할 때 상태가 변경되고, 이에 따라 화면이 업데이트되는 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

ReactDOM.render(<Counter />, document.getElementById('root'));
  • 여기서 useState 훅을 사용하여 상태를 관리하고, 버튼을 클릭할 때마다 상태를 업데이트합니다. 리액트 DOM은 상태가 변경될 때마다 가상 DOM을 업데이트하고, 이를 실제 DOM에 반영하여 화면을 갱신합니다.

서버 사이드 렌더링

  • 리액트 DOM은 클라이언트 사이드 렌더링 외에도 서버 사이드 렌더링(SSR)을 지원합니다. 이는 서버에서 HTML을 렌더링하여 클라이언트에 전달하는 방식으로, 초기 로드 속도를 개선하고 SEO 최적화를 할 수 있습니다.

  • 서버 사이드 렌더링을 위해 react-dom/server 모듈을 사용합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import React from 'react';
import ReactDOMServer from 'react-dom/server';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is rendered on the server.</p>
    </div>
  );
}

const html = ReactDOMServer.renderToString(<App />);
console.log(html);
  • 위 예제에서 ReactDOMServer.renderToString 메서드는 App 컴포넌트를 HTML 문자열로 변환합니다. 이 HTML 문자열을 서버에서 클라이언트로 전송하여 초기 로딩 성능을 높일 수 있습니다.

결론

  • 리액트 DOM은 리액트 애플리케이션을 실제 브라우저 환경에 렌더링하는 데 필수적인 모듈입니다. 가상 DOM을 사용하여 효율적으로 변경 사항을 관리하고, 클라이언트 사이드 및 서버 사이드 렌더링을 지원합니다. 리액트 DOM을 통해 상태와 속성의 변화를 감지하고, 이에 따라 사용자 인터페이스를 동적으로 업데이트함으로써 현대적인 웹 애플리케이션 개발을 가능하게 합니다.
REACT
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github