Install

이번 포스팅에서는 react-router-dom을 적용해서 페이지 전환 처리를 하도록 하겠습니다
기본적인 환경 설정을 위해 프로젝트 폴더를 하나 만들고 터미널을 열어 아래의 명령어를 입력해 줍니다.

npm install react react-dom react-router-dom
or
yarn add react react-dom react-router-dom

React Router 설정은 공식 문서을 참고해 주세요!

Router

페이지 전환을 위한 라우터 인터페이스를 설정합니다.

import { BrowserRouter as Router, Route } from "react-router-dom";
import { Route, Switch} from "react-router-dom";
import { PATH } from "./constants/path";
import Main from "./pages/Main";
import Event from "./pages/Event";

const App = () => {
    return (
        <Router>
            <Switch>
                <Route exact path={PATH.ROOT} component={Main} />
                <Route exact path={PATH.EVENT} component={Event} />
            </Switch>
        </Router>
    );
};

BrowserRouter

HTML5의 history API를 활용하는 라우터입니다. location.path을 사용하여 서버에 요청을 하는데
클라이언트 사이드에서 라우팅 처리를 하기에 깜빡임이 존재한다! 보편적으로 사용되는 라우터이며 조작이 간편한 특징이 있다
다만 history API를 사용하기에 IE9 이하 버전에서는 지원을 하지 않는다

import { BrowserRouter, Route } from "react-router-dom";

const App = () => {
    return (
        <BrowserRouter>
            <Route path="/" component={Event} />
        </BrowserRouter>
    );
};

HashRouter

URL의 해시를 사용하는 라우터이며 # 이후에 오는 해당 요소로 스크롤 위치를 바꿔 SPA에서 주로 사용된다
/event#event-today-list 처럼 주소뒤에 해시를 붙여서 사용할 수 도 있다
다만 SEO에 취약한 문제점이 있어 대부분 제작 시에 채택받지 못하고 있다

import { HashRouter, Route } from "react-router-dom";

const App = () => {
    return (
        <HashRouter basename="/event"/>
            <Route path="/" component={Event} />
        </HashRouter>
    );
};

'basename'은 모든 위치의 기본 URL을 의미합니다.

Link

해당 위치로 이동하도록 하는 기본적인 링크입니다. 검색 및 해시까지 속성으로 지원됩니다.

<Link
  to={ {
    pathname: "/list",
    search: "?sort=tag",
    state: { listType: 'grid' }
  } }
/>

'state'는 해당 페이지에 접근했을 때 유지되는 상태를 말합니다.

NavLink

현재 URL과 일치하는 요소에 스타일을 추가할 수 있습니다. Link의 특수 버전이라고 할 수 있겠죠

<NavLink to="/event" activeClassName="selected">
    이벤트 페이지라면 링크 활성화
</NavLink>

Conclusion

오늘 포스팅에서는 React Router Dom으로 페이지 전환 처리가 어떤 방식으로 동작하는지 알아보았습니다
React로 SPA 애플리케이션을 만든다면 React Router Dom을 통해 CSR로 페이지 처리를 맡기는게 효율적이겠죠!