react-router 사용하기

1. SPA란?

Single Page Application. 즉, 페이지가 하나인 애플리케이션.

리액트 프로젝트에서 html 파일 개수는 1개이다.

한 개의 html을 사용해서 여러 개의 페이지를 보여주려면 routing이 필요하다.

2. Routing이란?

url 경로에 따라 다른 화면을 보여주는 것.

리액트에는 라우팅 기능이 없으므로 라우팅을 지원하는 라이브러리를 사용해야 한다.

3. react-router

라우팅을 지원하는 라이브러리.

 

1) 설치

npm install react-router-dom

2) 페이지 만들기

src/pages/Login.js

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

function Login() {
  return (
    <div>
      <Link to="/signup">회원가입</Link>
    </div>
  );
}

export default Login;

src/pages/Signup.js

import React from "react";

function Signup() {
  return <h1>Signup</h1>;
}

export default Signup;

 

3) Router 컴포넌트 만들기

src/Router.js

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

import Login from "./pages/Login";
import Signup from "./pages/Signup";

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

4) index.js에 App 대신 Router 넣기

import React from 'react';
import ReactDOM from 'react-dom/client';
import Router from './Router';

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

 

* 라우트 이동하는 방법

1) <Link> 컴포넌트 사용하기

  클릭 시 지정한 경로로 바로 이동시킬 때 사용.

  프로젝트 내에서 페이지 전환할 때 사용. 

  DOM에서 <a> 태그로 변환됨.

  ex) 썸네일 클릭 시 상세페이지로 이동

 

2) useNavigate 훅 사용하기

  페이지 이동 시 추가로 처리해야 할 로직이 있을 때 사용.

  ex) 로그인 버튼 클릭 시, 입력 정보에 따라 인증/인가 처리 후 각기 다른 페이지로 이동

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

function Login() {
  const navigate = useNavigate();
  const goToSignup = () => {
    alert("회원가입을 해주세요");
    navigate('/signup');
  }
  return (
    <div>
      <button className="loginBtn" onClick={goToSignup}>로그인</button>
    </div>
  )
}

export default Login;