리액트 - SPA 개념과 Routing 하는 방법

SPA(Single Page Application)

 

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

이전에 HTML, CSS, Javascript 를 배웠을 때는 페이지 수만큼 html 파일이 존재하였다.

 

 

 

반면, 리액트 프로젝트에서 .html 파일의 개수는 ?

1개이다. 

 

 

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

Routing 이다. 이것은 SPA 방식이다.

 

 

 

 

 

 

 

 

Routing

 

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

리액트 자체에는 이러한 기능이 내장되어 있지 않는다.

 

React-router (= 리액트 라우터)는 여러 페이지들을 연결시켜주는 역할을 한다. 리액트의 라우팅 기능을 위해 가장 많이 사용되는 라이브러리이다.

 

 

 

 

 

 

 

라우터는 페이지들을 연결해주며 이를 이동시키는 역할을 해줍니다. 쉽게 말해 중계를 해준다고 표현하면 조금 더 이해하기 쉽겠네요!

 

최근 SPA가 주로 활용되면서 중요성이 커졌는데요, 이전에는 대체적으로 MPA 방식으로 개발이 되었었습니다.

그 이유는 외국에 비해 우리나라는 인터넷이 발달해서 약 10년 전 까지만 하더라도 MPA 방식으로 개발을 하더라도 사용하는데 큰 문제가 없었기 때문이죠.. 하지만 현재는 속도를 떠나 사용자의 사용성의 관점에서 본다면 SPA는 꼭 필요한 방식으로 자리잡았습니다.

 

출처: https://junjangsee.tistory.com/entry/Javascript로-라우터를-만들어-간단한-SPA를-구현해보기 [개발 여행]

 

 

 

 

 

 

 

 

 

 

react-router 를 설치하기 위해서는 다음과 같은 명령을 터미널에 입력한다.

 

npm install react-router-dom --save

 

 

 

 

 

 

 

 

 

Router.js 파일을 생성하고, 이렇게 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;

 

 

 

 

 

 

 

 

현재의 화면에는 원래 <App /> 컴포넌트가 보여지고 있었다.

 

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

 

 

CRA 로 만든 앱에 routing 기능을 적용하려면 index.js 를 수정해야 한다.

<App /> 컴포넌트 대신.... routing 을 설정한 위의 컴포넌트 <Router /> 로 변경해야 한다.

 

 

 

 

 

 

 

---

Route 이동하기

 

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

 

1. <Link> 컴포넌트 사용하는 방법

2. useNavigate 로 구현하는 방법

 

 

 

 

 

 

 

 

1. <Link> 컴포넌트 사용하는 방법

 

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

function Login() {
    

    return(
    <div className = "login_background">
        <div className="container">

        <div className="login-container">

            <h1 className="instagram">Instagram</h1>

            <form className="login-form">
                <input type="text" id="id" placeholder="전화번호, 사용자 이름 또는 이메일" />
                <input type="password" id="password" placeholder="비밀번호" />
                <Link to="/Main"><button className="login-btn">로그인</button></Link>
            </form>

            <p className="password_forget">비밀번호를 잊으셨나요?</p>



        </div>
    </div>
    </div>
    );

}

export default Login;

 

 

 

Router.js 에서 설정한 path로 이동하는 첫 번째 방법은 <Link /> 컴포넌트를 사용하는 방법이다. <a> 태그와 마찬가지로 <Link /> 컴포넌트도 지정한 경로로 바로 이동시켜주는 기능을 한다.

 

 

 

참고 ) <a> vs. <Link />

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

 

 

▼

 

링크 태그는 a  태그로 컴파일 된다. 그러나 둘의 차이점은 a 태그는 새로고침이 된다는 것이고, 링크 태그는 페이지가 바뀌지 않고 url 바뀐다.

 

 

 

 

 

 

 

 

 

 

2. useNavigate 로 구현하는 방법

 

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

function Login() {
    const navigate = useNavigate();    // 반환된 함수를 담는다.

    const goToMain = () => {
        navigate("/main");
    }

    return(
    <div className = "login_background">
        <div className="container">

        <div className="login-container">

            <h1 className="instagram">Instagram</h1>

            <form className="login-form">
                <input type="text" id="id" placeholder="전화번호, 사용자 이름 또는 이메일" />
                <input type="password" id="password" placeholder="비밀번호" />
                <button className="login-btn" onClick={goToMain}>로그인</button>
            </form>

            <p className="password_forget">비밀번호를 잊으셨나요?</p>



        </div>
    </div>
    </div>
    );

}

export default Login;

 

 

<Link /> 를 사용하지 않고 함수 호출을 통해 페이지를 이동하는 방법도 있다. goToMain 함수에서 구현된 것처럼, useNavigate 훅을 통해 페이지 이동할 수 있다.

 

useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환한다. 해당 함수를 navigate 라는 변수에 저장한다. 이후, navigate 의 인자로 Router.js 에서 설정한 path를 넘겨주면, 해당 경로로 이동할 수 있다.

 

 

 

 

const goToMain = () => {
        navigate("이동하고자 하는 url");
    }

 

 

 

 

 

 

 

 

 

 

 

---

두 가지 방법의 활용법

 

<Link />

 

 

• 클릭 시 바로 이동하는 로직 구현 시 사용.
• 예를 들어 Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 > 상세 페이지로 이동

 

 

 

 

 

useNavigate

 

• 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 useNavigate 훅을 활용하여 구현한다.
• 예를 들어 로그인 버튼 클릭 시
•  

• • Backend API로 데이터(User Info) 전송
  • User Data 인증 / 인가
  • response message
  • Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
  • Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동