React Router 사용하기

📝 개요

 

• 기존 자바스크립트는 MPA 방식으로 .html 파일이 페이지 수 만큼 존재했고 새로운 페이지를 로드하는 방식이 아니었다. 하지만 리액트로 넘어가면서 SPA 방식으로 .html 파일 갯수가 1개가 되었고 하나의 페이지 안에서 필요한 데이터를 가져오는 방식을 취하게 되었다. SPA를 다루기 위한 라우터에 대해서 정리하는 시간을 갖도록 한다.

 

🚀 목표

 

1. SPA가 무엇인지 설명할 수 있다.
2. react-router-dom을 이용해 Routes Component를 구현할 수 있다.
3. react-router-dom에서 Routing 하는 방법 2가지와 차이점을 설명할 수 있다.
4. <Link> Component와 <a> Tag의 차이점에 대해서 설명할 수 있다.

 

---

 

SPA

SPA(Single Page Application) : 페이지가 한 개인 애플리케이션

MPA(Multi Page Application) : 페이지가 여러 개인 애플리케이션

 

리액트 프로젝트에서 .html 파일의 갯수는 1개이다. 한 개의 웹 페이지(html) 내에서 여러 개의 페이지를 보여주는 방법은 Routing이다.

 

Routing

사용자가 요청한 경로(URL 주소)에 따라 해당 URL에 맞는 다른 View(화면)를 보여주는 것이다. 리액트 자체에는 이러한 기능이 내장되어 있지 않으며 react-router는 라우팅 기능을 위해 가장 많이 사용되는 라이브러리 중 하나이다.

 

 

React-router 설치하기

앞서 말했듯이 CRA에 Routing을 위한 로직이 들어있지 않기에 가장 인기 있는 routing solution인 react-router를 추가해서 라우팅을 구현하도록 한다.

$ npm install react-router-dom

package.json에서 설치 확인

 

 

Router Component 구현하기

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Login from './pages/Login/Login.js';
import Main from './pages/Main/Main.js';

function Router() {
	return (
    	<BrowserRouter>
        	<Routes>
            	<Route path="/" element={<Login />} />
                <Route path="/main" element={<Main />} />
            </Routes>
        </BrowserRouter>
    );
}

export default Router;

라우터를 통하여 사용자가 해당 주소를 입력하면 어떤 컴포넌트로 이동할지 지정할 수 있다.

 

// index.js
import Router from './Router.js';

ReactDOM.render(<Router />, document.getElementById('root'));

CRA로 만든 앱에 routing 기능을 적용하려면 index.js 파일을 수정하는데 기존 <App /> 컴포넌트 대신에 routing을 설정한 컴포넌트 <Router />로 변경했다.

 

 

Route 이동하기

<Link> Component

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

function Login() {
	return (
    	<div>
        	<Link to="/login">로그인</Link>
        </div>
    );
}

export default Login;

Router.js에서 설정한 path로 이동하는 첫 번째 방법은 <Link /> 컴포넌트를 사용하는 것이다. react-router-dom에서 제공하는 <Link /> 컴포넌트는 DOM에서 <a>로 변환(compile)된다. <a>와 마찬가지로 <Link />컴포넌트도 지정한 경로로 바로 이동시켜주는 기능을 한다.

그렇다면 <a>와 <Link />의 차이점은 무엇일까? <a>태그는 외부 사이트로 이동하는 경우에 사용하며, <Link /> 컴포넌트는 프로젝트 내에서 페이지를 전환하는 경우 사용한다.

 

useNavigate

import React form 'react';
import { useNavigate } from 'react-router-dom';

function Login() {
	const navigate = useNavigate();
    
    const goToMain = () => {
    	navigate("/main");
    }
    
    return (
    	<div>
        	<button className="loginBtn" onClick={goToMain}>
            	로그인
            </button>
        </div>
    );
}

export default Login;

<Link /> 컴포넌트를 사용하지 않고 함수 호출을 통해 페이지를 이동하는 방법은 useNavigate 훅을 사용하는 것이다. useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환한다. 해당 함수를 navigate라는 변수에 저장하고 navigate의 인자로 Router.js에서 설정한 path를 넘겨주면 해당 경로로 이동할 수 있다.

 

두 방식의 활용 방법

<Link />

1. 클릭 시 바로 이동하는 로직 구현 시 사용한다.

2. Nav Bar, Aside, Menu 등 아이템 리스트 페이지에서 아이템 클릭시 상세 페이지로 이동한다.

 

useNavigate

1. 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 훅을 활용하여 구현한다.

2. ex. 로그인 버튼 클릭시

  i. Backend API로 데이터 전송

  ii. User Data 인증/인가

  iii. response message

  iv. Case 1 : 회원가입 되어 있는 사용자는 Main page 이동

  v. Case 2 : 회원가입이 되어 있지 않은 사용자는 Signup page 이동