React - Router

1. SPA

1. SPA(Single Page Application)란?
    1. 페이지가 1개인 어플리케이션을 의미함. -> 다른 여러 개의 페이지를 보여주기 위해 Routing을 함.
2. 사용 이유
    1. 렌더링을 위한 서버 자원 및 불필요한 트래픽 낭비를 줄이기 위해
3. 단점
    1. 앱의 규모가 커지면 자바스크립트 파일 사이즈가 커짐 -> 유저가 실제로 방문하지 않을수도 있는 페이지에 관련된 렌더링 관련 스크립트도 불러오기 때문
    2. 위 단점은 Code Splitting을 통해 라우트별로 파일을 나눠 트래픽과 로딩속도를 개선할 수 있음..

2. Routing

1. Routing이란 다른 경로(url 주소)에 따라 다른 화면을 보여주는 것
2. React 자체에는 해당 기능이 내장되어 있지 않음 -> React가 Framework가 아닌 Library인 이유
3. React-router는 리액트의 라우팅 기능을 위해 가장 많이 사용되는 라이브러리임.(Third-Party Library)  

3. React Router

1. React-router 설치

npm install react-router-dom --save

2. 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 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
    1. ReactDOM.render(<Router />, document.getElementById('root'));
    2. 기존에 입력된 <App />컴포넌트를 <Router />로 수정해야함.(기능 적용을 위해)
4. 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;

        1. <a> -> 외부 사이트로 이동하는 경우, <link> 프로젝트 내에서 페이지 전환하는 경우
        2. 클릭 시 바로 이동하는 로직 구현 시에 사용함.
    2. useNavigation로 구현하는 방법

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; 

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