SPA Sing Page Application

웹 페이지가 한 개인 애플리케이션

☑️
인스타그램 클론 코딩에서 생성한 HTML 파일은 Login페이지에서 로그인에 성공 후 Main 페이지로 넘어가는 형태로 구성되어 있다.

클론 프로젝트에는 html 파일이 2개인데 SPA가 될 수 있을까?

한 개의 웹페이지(html)안에서 여러 개의 페이지를 보여주는 방법?

Routing

다른 경로(url)에 따라 다른 view(화면)를 보여주는 것

• React 자체에는 이러한 기능이 내장되어 있지 않다.
  이러한 이유로 React가 Framework가 아닌 Library로 분류된다.
  

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

React Router

CRA에는 rounting을 위한 로직이 들어있지 않기 때문에 가장 인기있는 react-router를 추가하여 routing을 구현한다.

💡설치 방법

npm install react-router-dom --save
//--save => 최신버전 설치

💡Rounter 컴포넌트 구현하기

//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;

• import로 BrowserRouter, Routes, Route를 react-router-dom모듈에서 가져온다.

• Router 함수에 <BrowserRouter> component를 사용하여 다른 url 주소로 통하는 경로를 작성한다.

• 이때 경로들을 path라는 속성을 사용하고 해당 파일의 경로를 작성한 후 element 속성으로 자바스크립트를 JSX에서 표현할 때 작성하는 중괄호 안에 component로 작성한다.

• 모든 <Routes>태그는 감싸는 태그가 있어야 하기에 <Routes> 태그로 감싸준다.

• 마지막으로 Router를 export default한다.

💡Rounter를 사용하기 위해 index.js를 수정하기

ReactDOM.render(<Router />, document.getElementById('root'));
//이전버전
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Router />);
//최신버전

• CRA로 만든 앱에 routing 기능을 적용하기 위해서는 index.js를 수정한다.

• 전 블로그 글에 남긴 내용과 같이 ReactDom 객체의 render 메소드를 사용하여 <Router /> component를 <div id="root"></div> 안에 보여질 수 있게 설정한다.

💡Route 이동하기

Route 이동하는 방법에는 두 가지가 있다.

1. <Link> component 사용

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> component를 가져온다.

• Router.js에서 설정한 path로 이동하기 위해서 <Link> component를 사용해야 하기 때문이다.

• react-router-dom에서 제공하는 <Link /> component는 DOM에서 <a>로 변환된다(compile)
  JSX → Babel → Javascript

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

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 훅을 통해 페이지 이동할 수 있다.

• useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환한다. 해당 함수를 navigate 라는 변수에 저장한다.

• 이후, navigate 의 인자로 Router.js 에서 설정한 path를 넘겨주면, 해당 경로로 이동할 수 있다.

• 💡주의사항
  만약 button에 onClick={변수 또는 함수 이름}을 명시할 때, button에 적용했던 속성disabled를 삭제해야 useNavigate이 정상적으로 작동한다.

언제 <Link />를 사용하며 언제 useNavigate를 사용할까?

1.<Link />

📌클릭 시 바로 이동하는 로직 구현 시에 사용한다.
ex. Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 > 상세 페이지로 이동

2. useNavigate

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