[React] React Router 라이브러리 / 페이지 라우팅

React Router

리엑트 프로젝트에서 페이지 라우팅을 하기 위해서 Client Side Rendering 을 도와주는 라이브러리가 필요하다.

비록 공식은 아니지만, 이를 위해 가장 많이 사용되고 있는 라이브러리인, React Router 라이브러리 를 사용해보자

React Router 설치

공식 홈페이지
https://reactrouter.com/

Declarative routing for React apps at any scale | React Router

공식 홈페이지 Docs 에서 npm installation 방법을 찾아보자

https://reactrouter.com/docs/en/v6/getting-started/installation

vscode 를 열어서, 터미널에 해당 명령을 입력하여 설치해 보자

npm react-router 설치

설치를 완료했다면 package.json 에서 정상적으로 설치되었는지 확인해보자

React Router 사용

간단하게, 브라우저의 home , new , edit 페이지가 있다고 가정 해보자

Home.js

const Home = () => {
    return (
        <div>
            <h1>Home</h1>
            <p>이곳은 홈 입니다.</p>
        </div>
    )
}

export default Home;​

New.js

const New = () => {
    return (
        <div>
            <h1>New</h1>
            <p>이곳은 작성페이지 입니다.</p>
        </div>
    )
}

export default New;​

Edit.js

const Edit = () => {
    return (
        <div>
            <h1>Edit</h1>
            <p>이곳은 수정 페이지 입니다.</p>
        </div>
    )
}

export default Edit;​

브라우저의 url 이 바뀌게 되면, 어떤 컴포넌트를 렌더링 해서 그 컴포넌트가 페이지 역할을 할 수 있도록,
App.js 에서 React Router 라이브러리를 사용하여  페이지 Routing 을 해보자 

App.js

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 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/>}/>
        </Routes>
        <RouteTest/>
      </div>
    </BrowserRouter>
  );
}

export default App;​

위와 같이, React Router 라이브러리의 BrowserRouter, Routes, Route 컴포넌트를 사용하여 url 을 통해 페이지 이동을 할 수 있게끔, 컴포넌트가 페이지 역할을 할 수 있도록 설정해 준다.

기존 MPA 방식에선 주로 a 태그를 이용하여 페이지 이동을 하였지만, SPA 방식에서 a 태그를 사용하여 페이지 이동을 처리하게되면, 페이지가 리로드 되기 때문에 적합하지 않다. 
그러므로, RouteTest 라는 컴포넌트를 만들어서 React Router 가 제공 하는 Link 컴포넌트를 사용한다.

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

const RouteTest = () => {
    return <>
        <Link to={'/'}>HOME</Link>
        <br/>
        <Link to={'/new'}>NEW</Link>
        <br/>
        <Link to={'/edit'}>EDIT</Link>
    </>
}

export default RouteTest;

위와 같이, Link 컴포넌트는 to 라는 prop 에 경로를 전달해준다.
Link 컴포넌트를 사용하면, 페이지가 리로드가 되지 않고 Client Side Rendering 할 수 있도록 도와준다.

참고

https://espania.tistory.com/372

[React] ROUTING / PAGE ROUTING

https://espania.tistory.com/373

[React] MPA / SPA / CSR