02. renderToString의 실제 동작

입력: React 컴포넌트 (JavaScript 객체)
  ↓ renderToString()
출력: HTML 문자열 (순수 텍스트)

// HomePage.jsx
import React, { useState } from 'react';
 
export default function HomePage() {
  const [count, setCount] = useState(0);
  return (
    <div className="container">
      <h1>안녕하세요</h1>
      <p>방문자 수: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

import { renderToString } from 'react-dom/server';
import HomePage from './HomePage.jsx';
 
const html = renderToString(<HomePage />);
console.log(html);

<div class="container"><h1>안녕하세요</h1><p>방문자 수: <!-- -->0</p><button>+1</button></div>

서버 메모리에 있는 것:
 
  onClick = () => setCount(count + 1)
 
  이건 "서버 메모리의 특정 주소"에 존재하는 함수야.
  이 함수가 참조하는 setCount도 서버 메모리에 있고,
  count 변수도 서버 메모리에 있어.

네트워크로 보낼 수 있는 것:
 
  문자열:  "안녕하세요"         ✅
  숫자:    0                    ✅
  HTML:    "<button>+1</button>" ✅
  함수:    () => setCount(...)   ❌ ← 불가능!

const fn = () => setCount(count + 1);
console.log(fn.toString());
// "() => setCount(count + 1)"
 
// 이 문자열을 받은 브라우저가 실행한다고 해봐:
// "setCount가 뭔데?" → ReferenceError
// 함수가 참조하는 컨텍스트(클로저)까지는 전달 불가

renderToString이 보존하는 것:
  ✅ HTML 태그 구조 (<div>, <h1>, <button>)
  ✅ 텍스트 내용 ("안녕하세요", "방문자 수:", "0", "+1")
  ✅ CSS 클래스 (className → class)
  ✅ HTML 속성 (id, style, data-*)
 
renderToString이 제거하는 것:
  ❌ onClick, onChange 등 이벤트 핸들러
  ❌ useEffect (브라우저 전용)
  ❌ useRef (DOM 참조, 브라우저 전용)
  ❌ 상태 변경 로직 (setState, dispatch)

React에서:   className="container"  (JavaScript 예약어 class 회피)
HTML에서:    class="container"       (표준 HTML 속성)
 
renderToString은 HTML을 만드는 거니까,
React의 className을 HTML의 class로 변환해.

<p>방문자 수: <!-- -->0</p>

// JSX에서 이렇게 작성하면:
<p>방문자 수: {count}</p>
 
// React 내부적으로 2개의 텍스트 노드가 됨:
//   텍스트 노드 1: "방문자 수: "
//   텍스트 노드 2: "0"
 
// 하지만 HTML에서는:
<p>방문자 수: 0</p>
// 이건 하나의 텍스트 노드 "방문자 수: 0"으로 해석됨
 
// 그래서 React는 구분자를 넣어:
<p>방문자 수: <!-- -->0</p>
// 이러면 "방문자 수: "와 "0"이 분리된 채로 유지됨

<!-- -->이 하는 역할:
 
  서버 출력:  "방문자 수: " + <!-- --> + "0"
                 고정 텍스트              상태값
                                           ↑
                               hydration 시 이 부분만 업데이트 대상
 
  만약 <!-- -->가 없으면:
  서버 출력:  "방문자 수: 0"
              하나의 텍스트 노드
              → React: "어디가 count지? 찾을 수 없음"

// JSX 버전
<h1 className="title">안녕하세요</h1>
 
// React.createElement 버전
React.createElement('h1', { className: 'title' }, '안녕하세요')

// 더 복잡한 예시
// JSX:
<div className="container">
  <h1>안녕하세요</h1>
  <p>방문자 수: {count}</p>
  <button onClick={() => setCount(count + 1)}>+1</button>
</div>
 
// React.createElement:
React.createElement('div', { className: 'container' },
  React.createElement('h1', null, '안녕하세요'),
  React.createElement('p', null, '방문자 수: ', count),
  React.createElement('button', { onClick: () => setCount(count + 1) }, '+1')
)

// run-render.mjs — Node.js에서 바로 실행 가능
// 실행: node run-render.mjs
 
import React, { useState } from 'react';
import { renderToString } from 'react-dom/server';
 
// JSX 없이 컴포넌트 정의
function HomePage() {
  const [count, setCount] = useState(0);
 
  return React.createElement('div', { className: 'container' },
    React.createElement('h1', null, '안녕하세요'),
    React.createElement('p', null, '방문자 수: ', count),
    React.createElement('button', { onClick: () => setCount(count + 1) }, '+1')
  );
}
 
// renderToString 실행
const html = renderToString(React.createElement(HomePage));
 
console.log('=== renderToString 출력 ===');
console.log(html);
console.log('');
console.log('=== 포맷팅된 출력 ===');
console.log(html
  .replace(/></g, '>\n<')
  .replace(/(<!-- -->)/g, '\n$1\n')
);

=== renderToString 출력 ===
<div class="container"><h1>안녕하세요</h1><p>방문자 수: <!-- -->0</p><button>+1</button></div>
 
=== 포맷팅된 출력 ===
<div class="container">
<h1>안녕하세요</h1>
<p>방문자 수:
<!-- -->
0</p>
<button>+1</button>
</div>

const [count, setCount] = useState(0);
//                                  ↑
//                          이 값만 HTML에 나타남
 
// setCount는? → 서버에서 호출할 일이 없으므로 무의미
// 실제로 setCount를 서버에서 호출하면?
// → 아무 일도 안 일어남 (렌더링은 이미 끝났으니까)

renderToString은 "사진"이다
 
  React 컴포넌트 = 움직이는 앱 (영상)
  renderToString = 스크린샷 (정지 화면)
 
  스크린샷에는:
    ✅ 현재 화면에 보이는 것
    ❌ 버튼 클릭 가능
    ❌ 애니메이션 재생
    ❌ 상태 변경

// server.js (A003 프로젝트)
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import HomePage from './react-pages/HomePage.jsx';
 
const app = express();
 
app.get('/', (req, res) => {
  // 1. 컴포넌트를 HTML 문자열로 변환
  const html = renderToString(React.createElement(HomePage));
 
  // 2. 완전한 HTML 문서에 삽입하여 응답
  res.send(`<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React SSR - Home</title>
</head>
<body>
  <div id="root">${html}</div>
  <script src="/public/react-bundle.js"></script>
</body>
</html>`);
});

전체 흐름:
 
  브라우저 → GET / → Express 서버
                        │
                        │ renderToString(HomePage)
                        │ → "<div class="container">..."
                        │
                        │ HTML 템플릿에 삽입
                        │ → "<!DOCTYPE html>..."
                        │
                        ▼
  브라우저 ← 완성된 HTML ← Express 서버
 
  사용자가 화면을 보는 시점:
  ┌──────────────────────┐
  │ 안녕하세요            │ ← 보인다!
  │ 방문자 수: 0         │ ← 보인다!
  │ [+1]                 │ ← 보이지만 클릭해도 반응 없음
  └──────────────────────┘
 
  아직 JS 다운로드 전이므로 "죽은 HTML" 상태
  → 다음 단계: Hydration으로 "살리기" (04-hydration.md)