Router

SPA(Single Page Application)을 페이지가 한 개인 애플리케이션이라고한다.
즉 한개의 .html 파일만 존재하고 그 안에서 여러개의 페이지를 볼 수 있는것이다.
그 방법이 Routing 이다.

Routing

라우팅이란 다른 url주소에 따라 다른 화면을 보여주는 것

리액트 자체에는 이런 기능이 없어서
Third-party Library인 React-router라는 라이브러리를 이용한다.

React router

• 설치 방법

npm install react-router-dom --save

• Router 컴포넌트

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

import Nav from "./components/Nav/Nav";
import Footer from "./components/Footer/Footer";
import Login from "./pages/Login/Login";
import List from "./pages/Signup/Signup";
import Detail from "./pages/Main/Main";

function Router() {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/list" element={<List />} />
        <Route path="/detail" element={<Detail />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}

export default Router;

이 Router 컴포넌트를 아래와 같이 index.js에 넣어서 구성해준다.

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

Route 이동하기

위에서 설정한 path를 활용해서 Route를 이동할 수 있다.
1. `' 컴포넌트

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

function Login() {
  return (
    <div>
      <Link to="/list">리스트로 이동</Link>
    </div>
  );
}

export default Login;

위와 같이 컴포넌트를 활용해서 path로 이동이 가능하다.

컴포넌트는 DOM에서 a 태그 로 변환 된다.

2. useNavigate 함수

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

function Login() {
  const navigate = useNavigate();

  const goToList = () => {
    navigate("/list");
  };

  return (
    <div>
      <button className="Btn" onClick={goToList}>
        리스트로 이동
      </button>
    </div>
  );
}

export default Login;

useNavigate 함수를 navigate 라는 변수에 저장해서 사용한다.
인자로 이동을 원하는 path를 넣어주면 해당 경로로 이동이 가능하다.

와 useNavigate 활용

• - 클릭 시 조건 없이 바로 이동하는 로직 구현시 사용
• useNavigate
  • 위에서는 단순한 로직으로 구성되었지만 특정 조건에서만 이동하는 로직이나 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 useNavigate 를 활용한다.