SPA(Single Page Application)

• 페이지가 한 개인 애플리케이션을 의미한다
• 기존의 html에서는 페이지의 수만큼 html 파일이 존재하였지만, 리액트에서는 html 파일의 개수는 한개이다
• 한개의 html에서 여러 개의 페이지를 보여주는 방식을 Routing이라고 한다

---

Routing

• 라우팅이란 다른경로에 따라 다른 뷰를 보여주는 것이다
• 리액트 자체에 이런 기능이 내장되어있지 않아 프레임워크가 아닌 라이브러리로 분류되며, 이것을 해결하기 위해 React Router를 사용한다

---

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 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'));

---

Route 이동

• <Link> 컴포넌트 사용
• useNavigate 구현

<Link> 컴포넌트 사용

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

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

export default Login;

• <Link> 컴포넌트는 DOM에서 <a>로 변환됨

  <a>와 <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;

• 함수 호출을 통해 이동하는 방법
• useNavigate Hook 사용
• useNavigate Hook을 실행하면 페이지를 이동할 수 있게 해주는 함수를 반환하며, 해당 함수를 navigate라는 변수에 저장
• navigate의 인자로 Router.js에서 설정한 path를 넘겨주어 해당경로로 이동

<link>와 useNavigate의 활용

1. <Link>
   • 클릭 시 이동하는 로직 구현시에 사용
   • ex: 상세페이지로 이동
2. useNavigate
   • 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 useNavigate Hook을 활용하여 구현
   • ex: 로그인 버튼 클릭시 ( API로 데이터 전송, User Data 인증/인가, response message...)