[React] 리액트 라우터(React Router) 사용하기

웹어플리케이션을 개발하다 보면 라우팅을 사용하는 경우가 많이 생긴다. Routing을 지원하는 라이브러리가 많이 있으나 React Router 라이브러리가 가장 많이 사용된다.  이번 페이지에서는 React의 Router에 대해 알아보고 사용법을 정리하고자 한다.

[목차]

1. Router 개념
2. React Router 사용하기
3. React Router 특징

---

 

 

1. Router 개념

Routing이란?

먼저 Routing의 개념부터 살펴보면 Route는 영어로 "경로를 정하다"라는 뜻을 가진다. 

웹에서 Routing이란 "사용자가 요청한 URL에 따라 입력받은 URL에 맞는 페이지를 보여주는 것"이다.

 

React의 Router

위와 비슷하게 React에서도 Router란 " 사용자가 입력한 주소를 감지하고 입력받은 주소에 따라 다른 페이지를 띄워 주는 역할"을 한다.

React는 SPA(Single Page Application)으로 하나의 페이지를 지원하는 Application이다. 따라서 Routing기능을 지원하는 라이브러리를 설치해 사용해야 한다. React Router을 사용하면 각 페이지마다 SPA를 유지하면서 필요한 최소한의 데이터만 랜더링할 수 있다.

 

React Router의 종류

BrowserRouter과 HashRouter이 있다.

1. BrowserRouter
2. HashRouter

 

2. React에서 Router 사용하기

1) 설치

먼저 라이브러리를 설치해야 한다. 터미널에 다음을 입력해 준다. yarn을 사용하는 경우 두 번째 명령어를 입력한다.

npm install react-router-dom

yarn add react-router-dom

 

2) 사용 예시

React Router의 기본 구조

import React from 'react';

import ReactDOM from 'react-dom/client;

 

import Home from './pages/home';

import Aboutus from './pages/aboutus';

import Members from './pages/members';

기본적인 Reat와 Home component와 Aboutus component, Members component를 import해준다.

 

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

그리고 react-router-dom 패키지로부터 3가지 핵심 컴포넌트들을 import해야 한다.

<BrowserRouter>

    <Routes>

        <Route path='/' element={<Home />}></Route>

        <Route path='/Aboutus' element={<Aboutus />}></Route>

        <Route path='/Members' element={<Members />}></Route>

    </Routes>

</BrowserRouter>

그 다음 BrowserRouter안에 Routes, Routes 안에 Route를 넣어야 한다. 기본 구조는 다음과 같다.

위의 코드는 index.js의 component의 return부분이다.

---

React Router로 동아리 소개 페이지 기본 설정

회사나 동아리를 소개하는 웹페이지를 만든다고 가정하고 사용 예시를 살펴 보자.

동아리의 소개 페이지는 Home page와 About Us page, Members page 3 페이지로 구성되어있고 하자. 또한 각 페이지마다 Header가 있고 navigation bar에는 다른 페이지로 갈 수 있는 링크가 있다.

 

App.js를 분할할 경우 아래처럼 App 컴포넌트를 넣어주면 된다.

App component가 분할되더라도 Router의 기본 구조는 변하지 않는다.

ex) index.js

//index.js 파일
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

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

ex) App.js

import React from 'react';

//페이지들 불러오기
import Home from './pages/home';
import Aboutus from './pages/aboutus';
import Members from './pages/members';

//react-ruuter 불러오기
import {BrowserRouter, Routes, Route} from 'react-router-dom';

function App() {
    return (
        <BrowserRouter>
            <Routes>
            	//wwww.domain.com을 호출하면 Home page가 나옴
                <Route path='/' element={<Home />}></Route> 
                <Route path='/Aboutus' element={<Aboutus />}></Route>
                <Route path='/Members' element={<Members />}></Route>
            </Routes>
        </BrowserRouter>
    );
}

export default App;

이제 BrowserRouter, Routes, Router을 살펴보자.

<BrowserRouter>

• react-router-dom을 적용하고 싶은 component의 최상위 component를 감싸주는 component이다.
• HTML5 History API(pushState, replaceState, popState)를 사용하여 브라우저의 URL을 조작하고 페이지를 새로고침하지 않아도 URL을 업데이트해준다.
• Route 매칭을 통해 BrowerRouter안에 선언된 component와 URL을 비교하여 렌더링할 component들을 결정한다.

<Routes>

• 여러 개의 Route를 그룹화하고 라우팅의 계층 구조를 만든다.

<Route>

• 특정 URL에 대한 컴포넌트를 렌더링하는 데 사용되는 컴포넌트이다.
• path 속성에 경로, element 속성에 JSX컴포넌트를 넣어 준다.
• 일반적으로 Home page의 path를 "/"로 설정하여 사용한다.

이제 www.domain.com을 호출하면 Home page로, www.domain.com/Aboutus를 호출하면 About Us page로, www.domain.com/Members을 호출하면 Members page로 이동한다.

이제 Home page와 <Header> 컴포넌트를 작성해주면 기본적인 페이지의 틀이 완성된다.

---

 

React Router에서 경로 이동하기

이제 Home.js에 Header, Main컴포넌트를 채운다.

Header는 다른 페이지로 갈 수 있는 네이게이션 바로 구성되어 있고,

Main은 홈으로 가기, 앞으로 가기, 뒤로 가기 기능이 구현되어 있다.

ex) Home.js

import React from 'react';
import Main from "../components/Main/Main";
import Header from "../components/Header/Header";

function Home() {
    return (
        <div>
            <Header></Header>
            <Main></Main>
        </div>
    )
}

export default Home;

 

ex) Header.js

// Header.js

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import styles from './Header.module.css';

const navigationLinks = [
    { label: 'Home', link: '/' },
    { label: 'About Us', link: '/Aboutus' },
    { label: 'Members', link: '/Members' }
];

function Header() {
    
    return (
        <div className={styles.headerContainer}>
            <nav>
                <ul className={styles.navList}>
                    {navigationLinks.map(({ label, link }) => (
                        <li key={label}>
                            <Link to={link} onClick={handleNavigationClick}>
                                {label}
                            </Link>
                        </li>
                    ))}
                </ul>
            </nav>
        </div>
    );
}

export default Header;

ex) main.js

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";


function Main() {
    const navigate = useNavigate();
   
    return (
        <div>
            <div className={styles.firstContainer}>
                <button onClick={() => navigate('/')}>홈으로 가기</button>
                <button onClick={() => navigate(1)}>앞으로 가기</button>
                <button onClick={() => navigate(-1)}>뒤로 가기</button>
            </div>
        </div>
    )
}

export default Main;

 

Header.js에서 <Link>로 페이지 이동을 구현했다. Router을 이용한 페이지 이동에는 Link 컴포넌트를 이용하는 방법 useNavigate 컴포넌트를 이용한 방법이 있다.

<Link>

<Link to="/" onClick={handleNavigationClick}>

                    <img

                        src={"/mark.png"}

                        alt="logo"

                    />

 </Link>

• react-router-dom에서 지원하며 <BrowserRouter /> 컴포넌트 내부에 작성한다.
• 원하는 컴포넌트에 감싸서 사용한다. 안에 {데이터 바인딩}을 통해 다른 컴포넌트도 넣을 수 있다.
• to="경로" 는 <Route>의 path 속성과 매핑된다.

<useNavigate>

function Main() {

    const navigate = useNavigate();

   

    return (

        <div>

            <button onClick={() => navigate('/')}>홈으로 가기</button>

            <button onClick={() => navigate(1)}>앞으로 가기</button>

            <button onClick={() => navigate(-1)}>뒤로 가기</button>

        </div>

    )

}

• Link 컴포넌트를 사용하지 않고 페이지 이동을 해야 하는 경우 사용하는 Hook이다.
• navigate()의 인자에 숫자를 입력할 경우 해당 숫자만큼 앞뒤로 이동하며 경로를 입력할 경우 해당 경로로 이동한다.
• {replace: true} 프로퍼티를 사용하면 history를 남기지 않고 이동하여 뒤로 가기 버튼에 이력이 반영되지 않는다.

---

 

3. React Router의 특징

Routing을 지원하는 라이브러리가 많이 있으나 일반적으로 React Router을 더 많이 사용한다.

왜 React의 Router이어야 할까?

<a href="/" ></a>

만약 React Router 대신 a 태그를 사용했다고 하자. <Link> 대신 위와 같이 a태그로 사용했을 것이다.

하지만 a 태그를 사용할 경우 여러 가지 단점이 있다.

1. 페이지가 이동될 때 모든 데이터가 렌더링(Server Side Rendering)되어 로딩 시간이 오래 걸린다.
2. 매번 모든 데이터가 렌더링되므로 코드의 재사용 효율이 떨어진다.
3. 한 코드에 서버 코드와 UI코드가 섞여 있어 가독성이 떨어지고 유지 보수가 어렵다.

그러나 react-router-dom을 이용하면 이러한 단점을 해결할 수 있다.

1. SPA(Single Page Application)을 유지하면서 필요한 데이터만 렌더링 하므로 로딩 시간이 짧아진다.
2. 각 페이지에 대한 Routing logic을 별도로 분리하여 코드 가독성이 뛰어나다.
3. UI와 라우팅 기능이 분리되어 동적 URL설정을 쉽고 편하게 관리할 수 있다.

결국 리액트가 전통적인 웹페이지의 단점을 개선하고자 나온 것이다. 따라서 SPA을 유지하면서 코드와 기능을 분리하여 성능을 개선시킨 것이라고 볼 수 있다.

참고한 글

https://react.vlpt.us/react-router/01-concepts.html

1. 프로젝트 준비 및 기본적인 사용법 · GitBook

 

4. React Router의 부가 기능들

기본적인 router의 기능 말고도, strictMoide, 엘리먼트 렌더링, 클라이언트 측 라우팅 등의 기능이 있다. 이에 대해서는 다음 글에서 다루어 보도록 한다.

https://ko.legacy.reactjs.org/docs/strict-mode.html

Strict 모드 – React

 

https://ko.legacy.reactjs.org/docs/rendering-elements.html

엘리먼트 렌더링 – React

클라이언트 측 라우팅

https://reactrouter.com/en/main/start/overview

Feature Overview v6.22.0 | React Router