React Router를 사용한 페이지 이동

React Router를 사용하여 page를 이동하는 방법에 대해 간략히 정리하는 글이다.

React는 SPA방식으로 구성되어 있는데 Router 사용방법전에 MPA 와 SPA에 대해 짚고 넘어갈 필요가 있다. 

 

✔︎ MPA(Multiple Page Application) 와 SPA(Single Page Application)

[Multiple Page Application(출처: 한입 크기로 잘라먹는 React)]

MPA란 여러개의 페이지로 구성되어 있는 어플리케이션을 말한다. 클라이언트(브라우저)가 서버로 URL을 통해 페이지 요청을 보내면 서버는 클라이언트에게 요청 url에 맞는 페이지를 반환하여 표출한다. 페이지 이동을 할 때 화면이 깜빡이면서 페이지가 이동되는 것이 MPA의 특징이다. 

[Single Page Application(출처: 한입 크기로 잘라먹는 React)]

반면 SPA의 경우 단일 페이지로 구성되어 있기 때문에 클라이언트가 서버로 URL을 통해 페이지 요청을 해서 받아올 수 있는 페이지가 한 개 밖에 없다. 그래서 SPA 방식을 따르는 React에서는 React Router를 이용하여 URL에 맞는 페이지 이동을 하게 되는데 서버로 url요청을 하여 페이지를 이동하는 것이 아니라 클라이언트 React app에서 요청 URL에 맞는 페이지로 업데이트를 해주게 된다. 서버로 부터는 화면에 맞는 데이터만 요청하여 받아오면 되는 것이다. 이렇게 단일 페이지로 구성된 SPA에서 브라우저 즉 클라이언트가 알아서 화면을 렌더링을 해주기 때문에 화면을 새로고침할 필요가 없고 깜빡임이 없어 굉장히 자연스럽다. 이런 방식을 CSR(Client Side Rendering)이라고 한다.

 

✔︎ React Router 

React Router를 사용하기 위해 우선 설치를 해야 한다.

npm i react-router-dom@6

우선 터미널에서 프로젝트 경로로 이동하여 위 명령어를 사용하여 React Router 설치를 한다. @ 뒤에 숫자는 버전인데 현재 일자 기준 제일 최신 버전을 설치하면 된다. 최신버전은 React Router 공식 Docs( https://reactrouter.com/en/main)에서 확인가능하다.

[package.json]

설치가 정상적으로 끝나면 package.json의 dependencies에서 설치된 React Router의 버전을 확인할 수 있다. 

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

 

사용방법은 정말 간단하다. 우선 react-router-dom에서 위와 같이 import한다.

import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";
import RouteTest from "./components/RouteTest";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/edit" element={<Edit />} />
          <Route path="/diary" element={<Diary />} />
        </Routes>
        <RouteTest />
      </div>
    </BrowserRouter>
  );
}

export default App;

우선 React Router를 사용할 상위 컴포넌트에 BrowserRouter로 감싸준다. Routes는 여러 Route를 감싸주는 역할로 요청 url와 경로가 맞으면 해당 페이지를 렌더링 해준다. Routes 밖에 있는 요소들은 항상 화면에 표출된다. 마지막으로 Route에는 해당 page의 경로를 path에 적어주고 element에는 경로에 맞는 컴포넌트를 넣어주면 된다.

RouteTest 컴포넌트는 버튼을 클릭하여 해당 page로 이동하는 예시이다. 아래의 코드를 보자.

import { Link } from "react-router-dom";

const RouteTest = () => {
  return (
    <>
      <Link to={"/"}>Home</Link>
      <br />
      <Link to={"/diary"}>Diary</Link>
      <br />
      <Link to={"/new"}>New</Link>
      <br />
      <Link to={"/edit"}>Edit</Link>
    </>
  );
};

export default RouteTest;

html에서는 a 태그를 사용하면 됐었지만 React Router에서는 제공해주는 Link를 사용하여 위와 같이 간단하게 사용할 수 있다. to 에 클릭시 이동할 경로를 기술해주면 된다.

 

[실행 결과]

 

실행 결과 화면은 위와 같이 Diary를  클릭했을때 주소창에 url 경로가 /diary로 바뀌면서 Diary컴포넌트가 화면에 렌더링 된 것을 확인할 수 있다.