리액트 라우터(React Router)- BrowserRouter, HashRouter, Route, Switch, Link (Feat. SPA)

1. 싱글 페이지 어플리케이션

    리액트는 싱글 페이지 어플리케이션을 쉽게 만들 수 있도록 하는 라이브러리이다.

    싱글페이지에는 아래와 같은 문제점이 있는데,

 

        ● 각 페이지를 북마크 할 수 없음       

        ● 브라우저상에서 뒤로 가기, 앞으로 가기와 같은 내비게이션 사용 불가

 

이를 보완하기 위해서는 화면들에 따라 주소를 각각 만들어, 다른 주소에 다른 뷰를 보여줘야 한다(Routing).

하지만 리액트 자체에는 이러한 기능이 내장되어 있지 않으므로, 관련 라이브러리를 설치해야 한다.

그 중 가장 역사가 오래되고 많이 쓰이는, 리액트 라우터를 사용해 보자.

 

2. React Router란?

React Router는 써드파티 라이브러리로, 여러 화면으로 구성된 웹 어플리케이션을 만드는데 사용되고 있다. 이는 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해주며, 서버 사이드 렌더링을 도와주는 도구들도 함께 딸려온다. 추가적으로 이는 react-native에서도 사용할 수 있다.

 

2.1 시작하기

리액트 라우터를 시작하려면, 먼저 웹 앱을 만들어야 한다. 웹 앱은 Create React App을 사용해서 만드는 것이 추천되므로,

npx create-react-app router-basic // react 설치
cd router-basic //만튼 파일로 경로변경해 주기
code .   //만든 파일로 넘어가기

위와 같이 새로운 프로젝트를 만들어 보자.

2.2 설치

다음으로 공용 npm 레지스트리에서 npm  또는 yarn 으로 React Router를 설치할 수 있다.

npm install react-router-dom // 둘 중 하나만 사용해서 설치
yatn add react-router-dom

✔참고

버전업(v4)이 되면서 react-router라는 모듈에 react-router-dom, react-router-native 등이 추가 되었다.

- react-router-dom : react-router 모듈에 dom이 바인딩 되어 있으며, 웹개발자를 위한 모듈이다.

- react-router-native: 이름에서도 알 수 있듯이 react-native 를 개발할 때 사용하는 모듈이다.

3. 실습하기

src 안에 component 폴더를 추가해 home.jsx와 about.jsx를 만들고,

//home.jsx
import React from 'react';

const Home = (props) => (
    <div>
        <h1>Home</h1>
        <p>이 곳은 홈 화면입니다.</p>
    </div>
);
export default Home;

//about.jsx
import React from 'react';

const About = (props) => (
    <div>
        <h1>About</h1>
        <p>라우터 뿌시기</p>
    </div>
);
export default About;

<BrowserRouter>를 사용해 app.js 와 index.js를 아래와 같이 바꿔보자.

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

reportWebVitals();

//app.jsx
import React from 'react';
import About from './components/about';
import Home from './components/home';

function App() {
  return (
    <>
      <Home />
      <About />
    </>;
  );
}
export default App;

3.1 <BrowserRouter>

BrowserRouter는 HTML5의 History API(pushState, replaceState, popstate event)를 사용하여 URL과 UI를 동기해주는 <Router>이다.

이는 페이지를 새로고침하지 않고도 주소를 변경할 수 있도록 해주고, 현재 주소에 관련된 정보를 props로 조회 및 사용이 가능하도록 한다.

BrowserRouter는 리액트 라우터 돔을 적용하고 싶은 컴포넌트의 최상위 컴포넌트를 감싸주는 래퍼 컴포넌트이기 때문에, 여기서는 App 컴포넌트를 감싸주면 된다.

 

✔참고 : HashRouter

BrowserRouter는 우리가 서비스하는 웹 애플리케이션의 웹서버 세팅이 사용자가 어떤 path로 들어와도 동일한 웹페이지(루트 페이지에 있는 html 파일을)를 서비스 할 수 있어야 사용할 수 있다.

 

그게 안되는 경우, BrowserRouter 대신 HashRouter를 써야한다.

 

---

해당 코드를 출력해보면,

메인에 Home, About 컴포넌트가 모두 보여지는 것을 알 수 있다.

이를 localhost: 3000에선 Home 이, localhost:3000/about 에선 About이 렌더링되게 하려면 어떻게 해야할까?

3.2  <Route>

App.jsx를 다음과 같이 바꿔보자.

import { Route, Routes } from 'react-router-dom';
import './App.css';
import About from './component/about';
import Home from './component/home';

function App() {
  return (
    <div>
      <Routes>
      <Route path='/' element={<Home/>}></Route>
      <Route path='/about' element={<About/>}></Route>
      </Routes>
    </div>
  );
}

export default App;

Route는 path에 따라 해당 UI를 보여주는 라우팅 기능을 가진 컴포넌트로 

path="" 부분에 URL 경로를 적고, 렌더링될 컴포넌트를 자식요소로 넣어주면 된다.

<Route path="/이동할 주소" element={<출력할 컴포넌트/>}> <Route/>

- 여러 개의 주소를 지정하고 싶으면, path={['/about','/profile']}와 같이 경로 배열을 지정해주면 된다. 배열은 js 코드이므로 {}로 묶어주는 것을 잊지 말자.

결과값을 보면 다음과 같다.