React Router 응용

저번 글에 이어서 React Router 의 응용방법에 대해 간략히 정리하는 글이다. 

React Router 를 이용해 페이지 이동을 할 때 파라미터를 보내는 방법과 강제로 페이지를 이동하는 방법에 대해 정리하려 한다.

 

 

✔︎ Path Variable

첫번째로 path Variable 이다.  사용방법은 아래와 같다.

<Route path="/경로/:파라미터명" element={<컴포넌트명 />} />

Route에서 path에 ":" 을 붙이고 이어서 파라미터명을 넣어주면 된다. 

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

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/edit" element={<Edit />} />
          <Route path="/diary/:id" element={<Diary />} />
          <Route path="/diary" element={<Diary />} />
        </Routes>
        <RouteTest />
      </div>
    </BrowserRouter>
  );
}

export default App;

예시 코드를 보면 diary 컴포넌트로 이동하는 url이 두 개가 있는데  아래에 pathVariable을 사용하게 되면 필수적으로 파라미터를 실어서 보내줘야 하므로 파라미터 없이 이동을 하기위해서는 위의 코드와 같이 파라미터가 없는 경로를 Route로 넣어줘야 한다.

 

받는 곳에서는

 

1. Import

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

위와 같이 useParam을 import 하여 사용하면 파라미터를 받을 수 있다.

 

2. 변수선언

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

const Diary = () => {
  const { id } = useParams();
  console.log(id);
  return (
    <div>
      <h1>Diary</h1>
      <p>이곳은 게시글 상세 페이지입니다.</p>
    </div>
  );
};

export default Diary;

사용 예시는 위와 같다. useParms를 사용하여 파라미터명을 비구조화 할당으로 받아 사용하면 된다. 

 

✔︎ Query String

Query String은 미리 협의된 데이터를 url 뒤에 파라미터로 전달하는 방식을 말한다. 

htttp://host:port/path?key=value&key2=value2

위와 같이 url 경로에 '?' 를 붙이고 key=value의 pair를 '&'로 이어서 여러개의 파라미터를 전달할 수 있다.

 

React Router를 사용하여 받는 법은 아래와 같다.

 

1. Import

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

useSearchParams 를 사용하기 위해 custom hook을 위와 같이 import 한다.

 

2. 변수 선언

const [searchParams, setSearchParams] = useSearchParams();

다음으로는 변수선언을 하게 되는데 searchParams 으로는 get을 이용하여 파라미터명을 넘겨주면 해당 파라미터의 value를 받아오거나 파라미터를 변경, 추가 할 수 있다.

const [searchParams, setSearchParams] = useSearchParams();

const id = searchParams.get("id"); // 키가 id인 파라미터 값을 받아옴 

searchParams.set("who","kihoon"); // 기존 파라미터 값들은 다 삭제되고 새로운 파라미터 추가

searchParams.append("who","kihoon"); // 기존 파라미터에 새로운 파라미터를 추가

setSearchParams(searchParams); // searchParams에 들어있는 key=value pair로 QueryString이 변경됨

 

예시 코드는 아래와 같다.

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

const Edit = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const id = searchParams.get("id");
  const mode = searchParams.get("mode");
  console.log("id : " + id, ", mode : " + mode);
  return (
    <div>
      <h1>Edit</h1>
      <p>이곳은 게시글 수정 페이지입니다.</p>
      <button onClick={() => setSearchParams({ who: "kihoon" })}>QS바꾸기</button>
    </div>
  );
};

export default Edit;

searchParams로 set 또는 append를 한다고 해서 바로 QueryString이 바뀌지는 않는다. setSearchParams의 인자로 넣어줘야 실제로 변경된다. 

 

✔︎ Page Moving(useNavigate)

useNavigate를 사용하면 클라이언트의 화면을 강제로 이동시킬수 있다.

 

1.Import

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

useNavigate를 사용하기 위해 위와 같이 Import 한다.

 

2. 변수선언

const navigate = useNavigate();

navigate('./경로');

위와 같이 변수 선언을하고 인자로 경로를 넣어주면 강제로 화면이 이동하게 된다. 예시코드는 아래와 같다.

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

const Edit = () => {
  const navigate = useNavigate();

  return (
    <div>
      <h1>Edit</h1>
      <p>이곳은 게시글 수정 페이지입니다.</p>
      <button onClick={() => {navigate("./home");}}> Home으로 가기 </button>
      <button onClick={() => { navigate(-1); }}> 뒤로 가기 </button>
    </div>
  );
};

export default Edit;

참고로 -1을 넣어주게 되면 직전페이지로 이동할 수 있다.