라우터란?

웹 페이지를 보면 많은 url 링크들이 있다.

https://velog.io 라는 링크가 있으면, 지금 작성자가 글쓰고 있는 페이지는 https://velog.io/write이다.

그리고 작성자의 포스트 목록은 https://velog.io/@milkbottle0305/posts 에 있다.

최근에 생겨난 팔로워를 보는 목록은 https://velog.io/@milkbottle0305/followers 에 있다.

이러한 링크들을 라우터라고 부른다.

사용자가 이동할 수 있는 페이지들의 경로를 의미하는 것이다.

React Router

이러한 라우터를 정의하고 이동을 쉽게 하도록 리액트에선 react-router 라는 패키지를 제공한다.

그리고 리액트를 SPA(Single Page Application) 방식으로 동작할 수 있도록 도와준다.

SPA란?

페이지 하나에 모든 것들을 담은 웹 애플리케이션을 뜻한다.
새로운 페이지의 요청이 올때마다 로드하는 것이 아니라,
하나의 페이지에서 필요한 부분들만 노출시키는 원리로 동작한다.
그래서 검색어 노출이나 SEO 최적화를 잘 해야한다.
왜냐하면 페이지별로의 웹사이트를 만들면 각 페이지별 메타데이터들을 넣어
SE에 노출시킬 수 있지만, SPA는 페이지 별의 노출이 불가능하기 때문이다.

설치법

npm install react-router-dom을 통해 설치를 진행한다. yarn환경은 yarn add react-router-dom이다.

사용법

벨로그 같은 블로그를 만들다고 가정하자.

우리가 필요한 페이지는 어떻게 될까?

홈(사용자의 게시물을 보여주는 곳)
	팔로워
    특정 게시물
로그인 및 회원가입
글쓰기 및 수정하기

이런식으로 5개의 페이지가 필요할 것이다.

홈

import React from 'react';

const Home = () => {
  return <div>홈 페이지 - 사용자의 게시물을 보여줌</div>;
};

export default Home;

팔로워

import React from 'react';

const Followers = () => {
  return <div>팔로워 페이지</div>;
};

export default Followers;

게시물

import React from 'react';

const Post = () => {
  return <div>특정 게시물 페이지</div>;
};

export default Post;

로그인

import React from 'react';

const Auth = () => {
  return <div>로그인 및 회원가입 페이지</div>;
};

export default Auth;

글쓰기

import React from 'react';

const WriteEdit = () => {
  return <div>글쓰기 및 수정하기 페이지</div>;
};

export default WriteEdit;

위처럼 총 5개의 페이지가 있다고 하자.

이를 App.js에서 다음과 같이 라우터를 정의할 수 있다.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import Followers from './Followers';
import Post from './Post';
import Auth from './Auth';
import WriteEdit from './WriteEdit';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/followers" component={Followers} />
        <Route path="/post/:postId" component={Post} />
        <Route path="/auth" component={Auth} />
        <Route path="/write-edit" component={WriteEdit} />
      </Switch>
    </Router>
  );
};

export default App;

Router 컴포넌트 내부에 Route 컴포넌트를 생성해서 각각의 경로를 지정할 수 있다.