[React] Router

라우팅이란?

• 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 즉, 다른 경로(URL 주소)에 따라 다른 View(화면)을 보여주는 것이다.
• 리액트 자체에는 이러한 기능이 내장되어 있지 않기 때문에 "페이지 이동"이라는 기능을 리액트에서는 리액트 라우터를 통해 처리할 수 있다
• 이런 이유 때문에 리액트는 Framework가 아닌 Library로 분류된다

리액트 라우터 (React Router)

• 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다
• React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 URL에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해 주는 라이브러리 라고 볼 수 있다

설치

npm install react-router-dom

yarn add react-router-dom

Router 컴포넌트 구현하기

• Router.js

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 Signup from "./pages/Signup/Signup";
import Main from "./pages/Main/Main";

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

export default Router;

index.js

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

• CRA로 만든 앱에 routing 기능을 적용하려면 index.js를 수정해야 한다
• 다양한 컴포넌트 <App /> <Login /> <Main /> 등 대신에 routing을 설정한 컴포넌트인 <Router />로 변경해야 한다

BrowserRouter

• <BrowserRouter> 태그로 컴포넌트를 감싸주자
• Header는 모든 URL에 공통 적용할 Component로 최상단에 위치 한다

Routes, Route 컴포넌트

• <Routes> 컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 열할이다
• <Route>는 path 속성에 경로, element 속성에는 컴포넌트를 넣어 준다. 여러 라우팅을 매칭하고 싶으면 URL뒤에 *을 사용하면 된다

Route 이동하기

<Link> 컴포넌트 사용하는 방법

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

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

export default Login;

• 웹 페이지에서는 원래 링크를 보여줄 때 a 태그를 사용한다. 하지만 a 태그는 클릭시 페이지를 새로 불러오기 때문에 사용하지 않는다
• react-router-dom에서 제공하는 <Link /> 컴포넌트는 DOM에서 <a>로 변환 된다
• Link 컴포넌트를 사용하는데, 생김새는 a태그를 사용하지만, History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다
• 뮨법
  • import { Link } from ‘react-router-dom’;
  • <Link to = “경로">링크명</Link>
• <a> vs. <Link />
  • <a> - 외부 사이트로 이동하는 경우
  • <Link /> - 프로젝트 내에서 페이지 전환하는 경우

**useNavigate 로 구현하는 방법

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

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

  const goToMain = () => {
    navigate("/main");
  };

  // 실제 활용 예시
  // const goToMain = () => {
  //   if(response.message === "valid user"){
  //     navigate('/main');
  //   } else {
  //     alert("가입된 회원이 아닙니다. 회원가입을 먼저 해주세요.")
  //     navigate('/signup');
  //   }
  // }

  return (
    <div>
      <button className="loginBtn" onClick={goToMain}>
        로그인
      </button>
    </div>
  );
}

export default Login;

• <Link /> 컴포넌트를를 사용하지 않고 함수 호출을 통해 다른 페이지로 이동을 해야 하는 경우, 뒤로가기 등에 사용하는 Hook 이다
• replace 옵션을 사용하면 페이지를 이동할 때 히스토리를 남기지 않는다
• useNavigate 훅을 통해 페이지를 이동할 수 있다
• useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환한다. 해당 함수를 navigate라는 변수에 저장한다
• 이후, navigate의 인자로 Router.js 에서 설정한 path를 넘겨주면, 해당 경로로 이동할 수 있다

<Link / > vs useNavigate

 

<Link />

• 클릭 시 바로 이동하는 로직 구현 시에 사용
• ex. Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 > 상세 페이지로 이동

useNavigate

• 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 useNavigate 훅을 활용하여 구현합니다.
• ex. 로그인 버튼 클릭 시
  • Backend API로 데이터(User Info) 전송
  • User Data 인증 / 인가
  • response message
  • Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
  • Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동
  참고자료:
• https://goddaehee.tistory.com/305