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;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.