Router

내일배움캠프 LGLG!

5주차(주특기 숙련 - React)

React Router 사용하기

Routing 사용자가 요청한 경로(URL 주소)에 따라 해당 URL에 맞는 다른 View(화면)를 보여주는 것
리액트 자체에는 이러한 기능이 내장되어 있지 않으며 react-router는 라우팅 기능을 위해 가장 많이 사용되는 라이브러리 중 하나이다.

React-router 설치하기

$ npm i install react-router-dom

Router Component 구현하기

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from "./pages/Login/Login.js";
import Main from "./pages/Main/Main.js";

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

export default Router;

라우터를 통하여 사용자가 해당 주소를 입력하면 어떤 컴포넌트로 이동할 지 지정할 수 있다.

// index.js
import Router from "./Router.js";

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

CRA(create-react-app)로 만든 앱에 routing 기능을 적용하려면 index.js 파일을 수정하는 기존 컴포넌트 대신에 routing을 설정한 컴포넌트 로 변경함

Route 이동하기

Link Component

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

function Login() {
  return (
    <div>
      <Link to="/Login">로그인</Link>
    </div>
  );
}

export default Login;

Router.js에서 설정한 path로 이동하는 첫 번째 방법은 Link 컴포넌트를 사용하는 것이다.
react-router-dom에서 제공하는 Link 컴포넌트는 DOM에서 a태그로 변환된다.
a태그와 마찬가지로 Link 컴포넌트도 지정한 경로로 바로 이동 시켜주는 기능을 한다.
그렇다면 a 태그와 Link의 차이점은 무엇일까?
a 태그는 외부 사이트로 이동하는 경우에 사용하며, Link 컴포넌트는 프로젝트 내에서 페이지를 전환하는 경우 사용한다.

useNavigate

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

function Login() {
  const navigate = useNavigate();

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

  return (
    <div>
      <button className="loginBtn" onClick={goToMain}>
        로그인
      </button>
    </div>
  );
}

export default Login;

Link 컴포넌트를 사용하지 않고 함수 호출을 통해 페이지를 이동하는 방법은 useNavigate 훅을 사용하는 것이다.
useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환한다.
해당 함수를 navigate라는 변수에 저장하고 navigate의 인자로 Router.js에서 설정한 path를 넘겨주면 해당 경로로 이동할 수 있다.

두 방식의 활용 방법

<Link />

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

useNavigate

1. 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 훅을 활용하여 구현한다.
2. ex) 로그인 버튼 클릭 시

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