[React] 페이지 라우팅 2 - React Router 응용

React Router V6

React에서 CSR기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리

App.js

import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Edit from "./pages/Edit";
import New from "./pages/New";
import Diary from "./pages/Diary";
import RoustTest from "./components/RouteTest";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="/new" element={<New />}></Route>
          <Route path="/edit" element={<Edit />}></Route>
          <Route path="/diary" element={<Diary />}></Route>
        </Routes>
        <RoustTest />
        <a href={"/new"}>new로 이동</a>
      </div>
    </BrowserRouter>
  );
}

export default App;

1. Path Variable

useParams

/diary 페이지는 일기 상세 페이지 입니다. 그러므로 ex) /diary/1 이런 path variable로 숫자가 들어올 것입니다.

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

이렇게 변경해주도록 합니다.

Diary.js

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

const Diary = () => {
  const { id } = useParams();
  console.log(id);
  return (
    <div>
      <h1>Diary</h1>
      <p>이곳은 Diary 입니다.</p>
    </div>
  );
};

export default Diary;

Diary.js에서는 useParams (React hooks 아님, react router custom hooks)을 사용하여 id를 받아주도록 합니다. 그리고 콘솔 로그가 잘 출력되었는지 확인합니다.

잘 출력되는 것을 확인할 수 있습니다.

2. Query String

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

/edit?id=10&mode=dark

?id=10&mode=dark => Query String

해당 url로 보내고 edit 컴포넌트에서 값을 꺼내보도록 하겠습니다.

useSearchParams

Edit.js

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

const Edit = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const id = searchParams.get("id");
  const darkmode = searchParams.get("darkmode");
  console.log(id);
  console.log(darkmode);
  return (
    <div>
      <h1>Edit</h1>
      <p>이곳은 Edit 입니다.</p>
    </div>
  );
};

export default Edit;

대괄호 비구조화 할당으로 첫번째는 searchParams, 두번째는 setSearchParams를 받습니다.
로그가 잘 출력되었는지 확인해봅니다.

잘 출력되는 것을 확인할 수 있습니다.

setSearchParams는 말 그대로 Query String을 변경시켜줍니다.

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

const Edit = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const id = searchParams.get("id");
  const darkmode = searchParams.get("darkmode");
  console.log(id);
  console.log(darkmode);

  return (
    <div>
      <h1>Edit</h1>
      <p>이곳은 Edit 입니다.</p>
      <button
        onClick={() => {
          setSearchParams({ who: "jay" });
        }}
      >
        QS 바꾸기
      </button>
    </div>
  );
};

export default Edit;

Qs 바꾸기 버튼을 누르게 되면 아래 사진과 같이 변경됩니다.

3. Page Moving

useNavigate

Edit.js

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

const Edit = () => {
  
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const id = searchParams.get("id");
  const darkmode = searchParams.get("darkmode");
  console.log(id);
  console.log(darkmode);

  return (
    <div>
      <h1>Edit</h1>
      <p>이곳은 Edit 입니다.</p>
      <button
        onClick={() => {
          setSearchParams({ who: "jay" });
        }}
      >
        QS 바꾸기
      </button>
      <button
        onClick={() => {
          navigate("/home");
        }}
      >
        Home으로 이동
      </button>
    </div>
  );
};

export default Edit;

useNavigate() 를 사용하여 navigate를 선언을 하고 Home으로 이동 버튼을 누르면 /home으로 이동하게 하였습니다.

버튼을 누르면 /home으로 이동을 하는 것을 확인할 수 있습니다. 로그인이 안된 사용자가 로그인한 사용자만 갈 수 있는 페이지 요청을 한다면 useNavigate를 사용하여 로그인 페이지로 보낼 수도 있습니다.

뒤로가기 버튼도 만들 수 있습니다.

<button
	onClick={() => {
  	navigate(-1);
	}}
>
    뒤로 가기
</button>

React Router v6를 사용하여 path variable, query string, page Moving을 구현해보았습니다.

---

리액트 공식 홈페이지
https://ko.legacy.reactjs.org/docs/react-api.html#reactmemo
해당 게시글은 인프런 강의
"한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지(이정환)"
를 정리한 내용입니다. 쉽게 잘 설명해주시니 여러분도 강의를 듣는 것을 추천드립니다.