[프론트엔드] 서버 사이드 랜더링[2]

 

2.  프로젝트 준비 및 설정

 

서버 사이드 렌더링을 진행하기 전에 라우터를 사용하여 라우팅을 하는 프로젝트를 먼저 만들겠습니다.

ssr-recipe 프로젝트 안에 react-router-dom을 설치합니다.

 

yarn add react-router-dom@^5.3.1

 

 

주의사항!!

2022년 기준으로 현재 라우터를 설치하면 6.x.x 버전으로 설치됩니다.

6.x.x 버전부터는 Route 컴포넌트 사용법이 달라져서 필자는 5.x.x 버전을 사용했으니 참고 바랍니다.

 

라우터 6.x.x 버전을 사용하고 싶다면 아래 작성한 글을 참고하셔서 수정하여 사용하시면 됩니다.

 

[프론트엔드] React Router v6 업데이트

 

 

 

2.1 컴포넌트 만들기

 

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

 

 

- components/Red.js

 

import "./Red.css";

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

export default Red;

 

 

- components/Red.css

.Red {
  background: red;
  font-size: 1.5rem;
  color: white;
  width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
}

 

 

- components/Blue.js

import "./Blue.css";

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

export default Blue;

 

 

- components/Blue.css

.Blue {
  background: blue;
  font-size: 1.5rem;
  color: white;
  width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
}

 

 

- components/Menu.js

 

import { Link } from "react-router-dom";
const Menu = () => {
  return (
    <ul>
      <li>
        <Link to="/red">Red</Link>
      </li>
      <li>
        <Link to="/blue">Blue</Link>
      </li>
    </ul>
  );
};

export default Menu;

- 

간단하게 빨간색과 파란색의 박스를 보여줄 컴포넌트와 페이지 이동할 메뉴 컴포넌트를 만들어 줍니다.

만든 컴포넌트를 리액트 앱에서 사용 하곘습니다.

 

 

2.2 페이지 컴포넌트 만들기

 

이번에는 라우팅을 처리하기 위한 페이지의 컴포넌트를 만들어 주겠습니다. 

해당 컴포넌트는 pages 폴더를 만들어서 작성해 주세요.

 

 

- page/RedPage.js

 

import Red from "../components/Red";

const RedPage = () => {
  return <Red />;
};

export default RedPage;

 

 

- page/BluePage.js

 

import Blue from "../components/Red";

const BluePage = () => {
  return <Blue />;
};

export default BluePage;

 

페이지 컴포넌트도 만들어 주었으면 이제 App 컴포넌트에서 라우트 설정을 추가해 줍니다.

 

 

 

- App.js

import { Route } from "react-router-dom";
import Menu from "./components/Menu";
import BluePage from "./page/BluePage";
import RedPage from "./page/RedPage";

function App() {
  return (
    <div>
      <Menu />
      <hr />
      <Route path="/red" component={RedPage} />
      <Route path="/blue" component={BluePage} />
    </div>
  );
}

export default App;

 

다음으로 컴포넌트를 추가해주었다면 이제 리액트 라우터를 적용할 차례입니다.

 

 

 

- index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

이제 프로젝트를 실행하여 Menu 컴포넌트에 있는 링크를 클릭합니다.

클릭한 메뉴로 컴포넌트로 잘 바뀌는지 확인해 보세요.

 

 

 

 

여기까지 끝났으면 이제 서버 사이드 렌더링을 위한 준비가 끝났습니다.

다음 챕터에서는 이제 서버 사이드 렌더링을 구현 해보겠습니다.