[React]Routing

SPA 란?

Single Page Application (싱글 페이지 어플리케이션) 의 약자이다(페이지가 1개인 어플리케이션이란 뜻).
전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성되어있습니다. 유저가 요청 할 때 마다 페이지가 새로고침되며, 페이지를 로딩 할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 합니다.
요즘은 웹에서 제공되는 정보가 정말 많기 때문에 속도적인 측면에서 문제가 있었고, 리액트 같은 라이브러리 혹은 프레임워크를 사용해서 뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 우선 어플리케이션을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달
SPA 의 단점은, 앱의 규모가 커지면 자바스크립트 파일 사이즈가 너무 커진다는 것. 유저가 실제로 방문하지 않을수도 있는 페이지에 관련된 렌더링 관련 스크립트도 불러오기 때문이다. 하지만 Code Splitting 을 사용한다면 라우트 별로 파일들을 나눠서 트래픽과 로딩속도를 개선 할 수 있습니다.

Routing

라우팅(Routing)이란 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것.(리액트 자체에는 이러한 기능이 내장되어있지 않는다.리액트가 Framework 가 아닌 Library 로 분류되는 이유)
Create React App(CRA)에 특별히 routing을 위한 로직이 들어있지 않기 때문에, 가장 인기 있는 routing solution인 react-router 를 추가해서 routing을 구현하도록 한다.

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 (

  <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(, document.getElementById('root'));

Route 이동하는 방법은 두 가지

<a> vs. <Link />
<a> - 외부 사이트로 이동하는 경우
<Link /> - 프로젝트 내에서 페이지 전환하는 경우

1.<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) 됩니다.

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;

goToMain 함수에서 구현된 것처럼, useNavigate 
훅을 통해 페이지 이동할 수 있습니다.

🐔참고문헌

·공식 사이트

https://reactrouter.com/
Read the Docs => installation => npm

·VELOPERT web 사이트

https://velopert.com/3417