Page 36 -

서버 사이드 렌더링을 할 때는 서버를 위한 엔트리 파일을 따로 생성해야 합니다. src 디렉터리에
index.server.js라는 파일을 생성하세요.

index.server.js
import React from 'react';
import ReactDOMServer from 'react-dom/server';

const html = ReactDOMServer.renderToString(
<div>Hello Server Side Rendering!</div>
);

console.log(html);

지금은 일단 가장 기본적인 코드만 작성했습니다. 서버에서 리액트 컴포넌트를 렌더링할 때는
ReactDOMServer의 renderToString이라는 함수를 사용합니다. 이 함수에 JSX를 넣어서 호출하
면 렌더링 결과를 문자열로 반환합니다.

20.3.2 서버 사이드 렌더링 전용 웹팩 환경 설정 작성하기

작성한 엔트리 파일을 웹팩으로 불러와서 빌드하려면 서버 전용 환경 설정을 만들어 주어야 합니다.
먼저 config 경로의 paths.js 파일을 열어서 스크롤을 맨 아래로 내린 후 module.exports 부분에
다음과 같이 두 줄을 추가해 주세요.

config/paths.js – 하단부
(...)
module.exports = {
dotenv: resolveApp('.env'),
appPath: resolveApp('.'),
appBuild: resolveApp('build'),
appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'),
appIndexJs: resolveModule(resolveApp, 'src/index'),
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
appTsConfig: resolveApp('tsconfig.json'),
yarnLockFile: resolveApp('yarn.lock'),
testsSetup: resolveModule(resolveApp, 'src/setupTests'),

546

리액트를 다루는 기술_개정판(본문)최종출력용.indb 546 2019-08-20 오전 11:03:33