ReactJS - DOM: 초보자 가이드

안녕하세요, 미래의 React 개발자 여러분! ReactJS와 Document Object Model(DOM)의 fascineting 세계를 여러분과 함께 탐험하게 되어 매우 기쁩니다. 컴퓨터 과학을 몇 년 동안 가르쳐온 경험으로, 많은 학생들이처음에는 이 개념에 어려움을 겪곤 보았지만, 믿으세요, 이해를 한번 얻게 되면 자전거 타는 것처럼 잊지 못할 것입니다!

DOM이란?

React와 DOM의 관계에 들어가기 전에, 기본 개념부터 시작해보겠습니다. DOM을 당신의 웹 페이지의 가족 나무로 상상해보세요. 웹 페이지에 있는 각 요소 - 버튼, 문단, 이미지 등 -은 이 나무의 가족 구성원과 같습니다. 가족 구성원의 머리 스타일이나 옷을 바꾸는 것처럼, 이 DOM 요소들을 조작하여 웹 페이지의 외관과 동작을 바꿀 수 있습니다.

ReactDOM: React와 브라우저 사이의 다리

이제 우리의 스타 플레이어를 소개하겠습니다: ReactDOM. ReactDOM은 React의 초고效적인 개인 비서라고 생각해보세요. 그의 주요 임무는 당신이 만든 React 컴포넌트를 브라우저가 이해하고 표시할 수 있는 것으로 변환하는 것입니다.

ReactDOM 사용법

간단한 예제로 시작해보겠습니다:

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

const element = <h1>Hello, React World!</h1>;
ReactDOM.render(element, document.getElementById('root'));

이 코드 조각에서 우리는 ReactDOM에게 element (간단한 h1 제목)을 가져다가 'root' ID를 가진 DOM 요소 내에 렌더링하도록 말하고 있습니다. 이는 비서에게 "이 사진(우리의 React 요소)을 그 틀( 'root' 요소)에 걸어달라"고 말하는 것과 같습니다.

ReactDOMServer: 서버 측에서 React를 제공

다음으로, ReactDOMServer를 소개합니다. 이는 ReactDOM의 쌍胞胎 형제로, 배후에서 일하는 사람입니다. ReactDOM이 브라우저에서 일을 처리하는 동안, ReactDOMServer는 서버에서 React 컴포넌트를 렌더링하는 데 도움을 줍니다.

간단한 예제를 보겠습니다:

import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);

이 코드는 우리의 전체 App 컴포넌트를 HTML 문자열로 변환합니다. 이는 우리의 React 앱을 폴라로이드 사진으로 찍는 것과 같습니다 - 빠르게 브라우저로 전송할 수 있는 스냅샷입니다.

ReactDOMClient: 새로운 아이

React 18과 함께 우리에게 소개된 ReactDOMClient입니다. 이는 ReactDOM의 더 젊고 활기찬 형제로, 성능과 새로운 기능에 중점을 둡니다.

이를 어떻게 사용할 수 있는지 보겠습니다:

import React from 'react';
import { createRoot } from 'react-dom/client';

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

이제 우리는 앱을 직접 렌더링하는 대신, 먼저 'root'를 만듭니다. 이 'root'는 React 18의 모든 새로운 기능을 가지고 우리의 React 앱을 심고 성장시킬 수 있는 특별한 냄비와 같습니다.

ReactDOMClient 적용

실제 상황에서 ReactDOMClient를 어떻게 사용할 수 있는지 더 깊이 탐구해보겠습니다:

import React from 'react';
import { createRoot } from 'react-dom/client';

function Counter() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

const root = createRoot(document.getElementById('root'));
root.render(<Counter />);

이 예제에서 우리는 간단한 카운터 앱을 만들고 있습니다. createRoot 함수는 우리의 React 18 환경을 설정하여 모든 새로운 기능을 사용할 수 있게 합니다.

ReactDOM 메서드 비교

이야기한 다양한 메서드를 이해하는 데 도움이 되는 표를 제공하겠습니다:

메서드	사용 장소	목적
ReactDOM.render()	브라우저	React 요소를 DOM으로 렌더링
ReactDOMServer.renderToString()	서버	React 컴포넌트를 HTML 문자열로 렌더링
ReactDOMClient.createRoot()	브라우저	React 18 기능을 위한 루트 생성
root.render()	브라우저	생성된 루트에 컴포넌트 렌더링

결론

이제 여러분은 React DOM 풍경을 거쳐가며, 전통적인 ReactDOM에서 서버 측의 ReactDOMServer, 그리고 반짝이는 새로운 ReactDOMClient에 이르렀습니다. 어떤 새로운 언어(프로그래밍이든 다른 것이든)를 배울 때처럼, 연습이 완벽을 이루는 열쇠입니다. 이 개념들을 자신의 프로젝트에서 실험해보지 마세요.

저는 항상 학생들에게 이야기하듯이, 코딩은 요리와 같습니다 - 처음에는CONFUSION을 만들 수 있지만, 시간과 연습이 지나면 맛있는 React 애플리케이션을 만들 수 있을 것입니다! 그러니 코드에 손을 댄 다음, 행복한 React 개발을 기원합니다!

Credits: Image by storyset