[React] 라우팅(react-router-dom)(useParams, Query)

라우팅이란?

라우팅이란, 우리가 네트워크에서 특정 경로로 데이터를 보낼 때 사용되는 과정을 말합니다.

라우팅은 어떤 네트워크 안에서 데이터를 최적의 경로를 선택하는 과정을 말합니다. 여기서 최적의 경로는 최단거리가 될 수도 있고, 가장 빠른 시간에 전달하는 것으로 계산될 수 도 있습니다.

 

라우팅 순서

1. 브라우저에서 최초에 '/'경로로 요청을 하면,

2. React Web App을 내려줌

3. 내려받은 React App에서 '/'경로에 맞는 컴포넌트 보여줌

4. React App에서 다른 페이지로 이동하는 동작을 수행하면,

5. 새로운 경로에 맞는 컴포넌트를 보여줌

 

React Router

1. 설치

$ npm i react-router-dom

 

index.js

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import MainPage from "./pages/MainPage";

let rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="/" element={<MainPage />} />
      </Route>
    </Routes>
  </BrowserRouter>
);

우리가 설치한 react-router-dom으로부터 BrowserRouter, Routes, Route를 import 해줍니다.

BrowserRouter > Routes > Route순으로 넣어주고, Route의 속성으로는 path와 element가 있습니다.

path는 주소 경로이고, element는 연결할 Compoent 요소입니다.

 

 

App.js

import * as React from "react";
import { Link, Outlet } from "react-router-dom";

export default function App() {
  return (
    <div>
      <h1>Bookkeeper</h1>
      <nav
        style={{
          borderBottom: "solid 1px",
          paddingBottm: "1rem",
        }}
      >
        <Link to="/invoices">Invoices</Link> |{" "}
        <Link to="/expenses">Expenses</Link>
      </nav>
      <Outlet />
    </div>
  );
}

react-router-dom으로부터 Link를 import해줍니다.

Link태그의 속성으로는 to가 있습니다.

to는 주소 경로를 가리킵니다.

<Outlet />을 nav뒤에 놓아줌으로써, 자식 route인 Invocies 혹은 Expenses를 클릭해도 부모 route인 App.js는 남아있습니다.

 

React Router의 기능들

useParams

# App.js

<Route path="diary" element={<Diary />}>
  <Route path=":id" element={<Diary />} />
</Route>

# Diary.js

import { useParams } from "react-router-dom";
const Diary = () => {
  const { id } = useParams();
}

->/diary/id -> id에 들어온 값을 Diary.js에서 활용합니다. ex) /diary/5, /diary/13

라우터에서는 path속성에 :변수명을 추가해줍니다.

링크에서는 react-router-dom에서 useParams를 import 해줍니다.

const { id } = useParams()로 전달받아, 앞으로 id 변수명으로 사용할 수 있습니다.

 

Query

; 웹 페이지에 데이터를 전달하는 가장 간단한 방법

# Edit.js

import { useSearchParams } from "react-router-dom";
const Edit = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const id = searchParams.get("id");
  return(
    <div>
      <buttion
        onClick={() => {
          setSearchParams({who:"guesung"})
        }}
      >변경</button>
    </div>
  )
}

react-router-dom으로부터 useSearchParams를 import해줍니다.

const [searchParams, setSearchParams] = useSearchParams로 배열을 비구조화 할당해줍니다. searchParams는 앞으로 사용할 변수명이고, setSearchParams는 앞 변수를 변경시켜주는 함수입니다.

setSearchParams({who : "guesung"})인 버튼을 누르면, /edit 였던 주소가, /edit?who=guesung으로 바뀝니다.