React(Router)

학습목표

라우터에 대한 개념 정립과 a 태그, Link 컴포넌트, useNavigate 구현 방법에 대한 정리를 목표로 작성했습니다.

SPA

• SPA (Single Page Application) 페이지가 1개인 애플리케이션
• 이전: Login.html, Main.html 페이지 수만큼 html 파일이 존재
• 리액트 프로젝트: html의 개수는 1개 > SPA
• Routung: 한개의 웹페이지(html)안에서 여러 개의 페이지를 보여주는 방법

Routing

• 라우팅(Routing)이란 url(다른 경로)에 따른 다른 view(화면)을 보여주는 것 입니다.
• 리액트는 Framework가 아닌 Library이기 때문에 리액트 자체에 이러한 기능이 내장되어 있지 않습니다.
• React-router는 리액트의 라우팅 기능을 위해 가장 많이 사용되는 라이브러리 입니다.

React Router

• Creat React App(CRA)에 특별히 라우팅을 위한 로직이 없기 때문에, 가장 인기있는 react-router를 추가해서 라우팅을 구현합니다.

1. react-router 설치
2. React 컴포넌트 구현하기

• BrowserRouter, Routes, Route 필수 구조
• 사용할 경로 import 필수 작성

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;

3. index.js

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

• CRA로 만든 앱에서 라우팅 기능을 적용하려면, index.js 를 수정해야합니다.

3-1. Route 이동하기

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

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

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

export default Login;

• 프로젝트 내에서 페이지 전환하는 경우 자주 사용

2. <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;

• useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환합니다. 해당 함수를 navigate 라는 변수에 저장합니다.
• 이후, navigate 의 인자로 Router.js 에서 설정한 path를 넘겨주면, 해당 경로로 이동할 수 있습니다.

0. <a>, <Link>, <useNavigate> 활용법

• <a>
  - 외부 사이트로 바로 이동하는 경우 사용
  
• <Link>
  - 프로젝트 내에서 페이지 전환하는 경우
  - 클릭 시 바로 이동하는 로직 구현에 사용
  - ex) Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 -> 상세 페이지로 이동

• <useNavigate>
  - 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 사용
  - ex) Backend API로 데이터(User Info) 전송
  - User Data 인증 / 인가
  - response message
  - Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
  - Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동