SPA

• SPA(Single Page Application)이란 페이지가 하나인 어플리케이션이다.
• MPA(Multi Page application)는 각 페이지를 요청할 때마다 독립적으로 페이지를 로딩해서 화면을 보여준다. MPA의 비효율성을 개선하기 위해 현재는 SPA가 널리 사용된다.
• 하나의 웹페이지(html) 안에서 여러 개의 페이지를 보여주기 위해 Routing을 한다.
• entry point는 사용자에게 제일 먼저 보여지는 페이지이다. index.html이 entry point가 된다.

SPA란? | velopert

Routing

라우팅(Rounting)이란 다른 경로(url 주소)에 따라 다른 View(화면)을 보여주는 것이다.

React-router는 리액트의 라우팅 기능을 위해 가장 많이 사용 되는 라이브러리이다.

1. react-router 설치

npm install react-router-dom --save

• --save: package.json에 설치된 패키지의 이름과 버전 정보를 업데이트한다.

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

3. index.js에서 렌더링

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

Route 이동하는 방법: <Link />, useNavigate

• <Link />: 클릭 시 바로 이동하는 로직 구현 시에 사용한다.
  ex. Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 > 상세 페이지로 이동
• useNavigate: 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 useNavigate 훅을 활용하여 구현한다.
  ex. 로그인 버튼 클릭 시 id, pw 확인 후 페이지 이동(조건에 따라 페이지 이동할지 말지 결정해야 하는 경우)

<Link /> 컴포넌트

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

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

export default Login;

• react-router-dom에서 제공하는 <Link /> 컴포넌트는 DOM에서 <a> 태그로 변환(Compile)된다.
• <a> 태그와 마찬가지로 <Link /> 컴포넌트도 지정한 경로로 바로 이동시켜주는 기능을 한다.

a 태그와 Link 컴포넌트의 차이점

• a 태그: 페이지를 바꿀 때마다 계속 서버에 요청한다. MPA 방식으로 동작한다.
  ※ 외부 사이트로 연결할 때는 a 태그가 필요하다.
• Link 컴포넌트: 최초 1번만 요청하고 이후 페이지를 바꿀 때 서버에 요청하지 않는다. 리렌더링해야 할 부분만 다시 리렌더링한다. SPA 구현을 위해 필요하다.

useNavigate 훅

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

function Login() {
  const navigate = useNavigate(); // useNavigate 함수의 리턴값을 navigate 변수에 담음

  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를 넘겨주면, 해당 경로로 이동할 수 있다.