React Routing에 관하여(1)

김인태·2022년 6월 25일

React router

😮Routing 이란 무엇인가?

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

리액트에서는 어떻게 사용될까?

리액트는 SPA (Single Page Application) 방식

기존 웹 페이지 처럼(MPA 방식) 여러개의 페이지를 사용, 새로운 페이지를 로드하는 방식이 아닙니다.
새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가집니다.

리액트에서는 react-router-dom이 가장 많이 쓰입니다.

Create React App(CRA)에 특별히 routing을 위한 로직이 들어있지 않기 때문에, 가장 인기 있는 routing solution인 react-router를 많이 씁니다.

설치 방법

npm install react-router-dom

을 실행하고있는 터미널에 치면 됩니다!

🤔어떻게 사용하나요?

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";


function Router() {
  return (
    <BrowserRouter>  
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/main" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

맨위부터 설명드리겠습니다 !

BrowserRouter? -> HTML5를 지원하는 브라우저의 주소를 감지합니다.
Routes? -> 컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 합니다. (여러 Route를 감싸고 있는거 보이시죠?)
Route? -> path속성에 경로, element속성에는 컴포넌트를 넣어 주면 됩니다! 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *을 사용하면 됩니다!
(ex) localhost:3000/signup 을 주소창에 입력하면 Signup이라는 컴포넌트가 렌더링 되는 방식입니다!

Route 이동하는 방법! ✔

Link 태그

Router.js 에서 설정한 path로 이동하는 첫 번째 방법은 Link 컴포넌트를 사용하는 방법입니다.
react-router-dom 에서 제공하는 Link컴포넌트는 DOM에서 a 로 변환됩니다.
a 태그와 마찬가지로 Link 컴포넌트도 지정한 경로로 바로 이동시켜주는 기능을 합니다.
a vs. Link
a - 외부 사이트로 이동하는 경우
Link - 프로젝트 내에서 페이지 전환하는 경우
---보통 어떤 경우에 사용하나면?🤔----
클릭 시 바로 이동하는 로직 구현 시에 사용합니다.
ex. Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 > 상세 페이지로 이동

import React from "react";
import { Link } from "react-router-dom";
//react-router-dom 에서 사용해야 합니다!

function Login() {
  return (
    <div> // 누르면 a태그 처럼 해당 주소로 이동합니다!
      <Link to="/signup">회원가입</Link>
    </div>
  );
}

export default Login;

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 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환합니다. 해당 함수를 navigate 라는 변수에 저장합니다.
이후에, navigate 의 인자로 Router.js 에서 설정한 path를 넘겨주면, 해당 경로로 이동할 수 있습니다.
페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 useNavigate 훅을 활용하여 구현합니다.
---보통 어떤 경우에 사용하나면?🤔----
ex. 로그인 버튼 클릭 시
Backend API로 데이터(User Info) 전송
User Data 인증 / 인가

이외에도 HashRouter도 있고 수많은 방법들이 있습니다, uri를 설정하는 방식도 어떻게 바꾸고 하는지에 대한 방법이 굉장히 많은데 그것들은 다음에 알아보도록 하겠습니다!