React - react-router(v6)

!!! 본 포스트는 react-router v6에 대한 포스팅입니다.

Rounting

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

다만 리액트는 전반적인 프론트엔드에 관련된 기능을 제공하는 프레임워크(Angular.js 등...)와 달리 SPA를 위한 최소한의 기능만을 제공하는 UI 라이브러리이다.

때문에 리액트 자체에서 Routing에 관련된 기능을 제공하지 않는다.

---

react-router

위에 서술한 이유덕분에 리액트에서 라우팅을 사용하려면 서드파티 라이브러리를 설치해야 한다.

react-router는 가장 많이 사용되어지는 리액트를 위한 routing solution 되시겠다.

---

react-router 설치

react-router를 설치하는 방법은 npm이나 yarn과 같은 패키지 매니저를 이용하면 간단하게 설치할 수 있다.

npm install react-router-dom --save

yarn add react-router-dom

---

Router 컴포넌트 구현

react-router를 이용하여 Router 컴포넌트는 다음과 같이 구현할 수 있다.

Router.js

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Login from './Login';
import Main from './Main';
import ProductList from './List';

const Router = () => {
  return (
    <BrowserRouter>
      <div className="appContents">
        <Routes>
          <Route path="/" element={<Main />} />
          <Route path="/login" element={<Login />} />
          <Route path="/list" element={<List />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
};

export default Router;

!!! react-router v6에서는 Switch 대신 Routes를 사용하며,
component에서 element로 바뀌어 props를 내려주기 더욱 편해졌다.

---

Link와 useNavigate

지정된 Route로 이동할 수 있는 방법은 크게 두가지가 있다.
Link 컴포넌트와 useNavigate 훅

Link 컴포넌트 사용

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

const Main = () => {
  return (
    <div className="main">
      <Link to="/login">회원가입</Link>
    </div>
  )
}

export default Login;

Link 컴포넌트는 기재한 path로 이동할 수 있게 하이퍼링크를 걸어주게 된다.

Link는 Babel에서 컴파일을 거칠 때 a태그로 변환되어 진다.

useNavigate

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

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

  const goToMain = () => {
    if (!조건){
    	window.alert('조건에 맞지 않습니다!')
    } else {
      navigate("/main");
    }
  };

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

export default Login;

만약 조건에 따라 패스로 보내줘야 할 땐, useNavigate 훅을 사용하면 된다.

useNavigate를 사용하면 onClick과 함께 조합하여 로직을 섞어줄 수 있게된다.