Page 31 -

그림 20-3 서버 사이드 렌더링
프로젝트 준비하기

서버 사이드 렌더링 구현하기

데이터 로딩하기

코드 스플리팅하기

20.2 프로젝트 준비하기 R E A C T

서버 사이드 렌더링을 진행하기 전에 리액트 라우터를 사용하여 라우팅하는 간단한 프로젝트를

만들어 봅시다. 조금 전에 만들었던 ssr-recipe 프로젝트 디렉터리에 react-router-dom을 설치
하세요.
20
$ yarn add react-router-dom

20.2.1 컴포넌트 만들기 서버 사이드 렌더링

간단한 컴포넌트를 세 개 작성합니다. components 디렉터리를 생성하여 그 안에 다음 파일들을
하나하나 순서대로 작성하면 됩니다.

components/Red.js
import React from 'react';
import './Red.css';

const Red = () => {
return <div className="Red">Red</div>;
};

export default Red;

541

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