24.1.2 라우터 적용

프로젝트를 처음 만들고 나서 설계를 시작할 때 가장 먼저 무엇을 하면 좋을까요? 바로 리액트 라우터를 프로젝트에 설치하고 적용하는 것입니다. 앞으로 만들게 될 주요 페이지의 라우트 컴포넌트를 미리 만들겠습니다. 먼저 틀을 갖춰 놓고 하나하나 개발하면 편합니다.

우선 react-router-dom 라이브러리를 설치하세요.

$ yarn add react-router-dom

다음으로 총 다섯 개의 페이지를 만듭니다. 라우트와 관련된 컴포넌트들은 src/pages 디렉터리에 만들겠습니다.

앞으로 만들 라우트 컴포넌트는 다음과 같습니다.

• LoginPage.js - 로그인

• RegisterPage.js - 회원가입

• WritePage.js - 글쓰기

• PostPage.js - 포스트 읽기

• PostListPage.js - 포스트 목록

자, 이제 이 컴포넌트를 하나씩 만들어 주세요.

pages/LoginPage.js

import React from 'react';

const LoginPage = () => {
  return <div>로그인</div>;
};

export default LoginPage;

---