[React] Routing (3) Path Variable(useParams), Query String(useSearchParams), Page Moving(useNavigate)

 

   목차 

1. Path Variable - useParams
2. Query String - useSearchParams
3. Page Moving - useNavigate

 

 

 

 이 게시글을 보기 전에 봐야하는 게시글들 

 

 

 1. Router의 개념 

(Router의 개념과 SPA와 CSR에 대한 설명이 있습니다.)

https://dev-ini.tistory.com/81

[React] Routing (1) 개념, SPA & CSR

 

 

 2. Router 설치 및 사용방법 

(이 게시물과 이번 게시물의 코드가 이어지니 원활한 이해를 위해 꼭 보고 오시길 바랍니다!)

https://dev-ini.tistory.com/82

[React] Routing (2) Router 설치 및 사용방법 완벽 정리

 

 

---

 

 

 

React Router Dom의 유용한 기능 3가지는 다음과 같다.

 

 

---

 

 

 1. Path Variable - useParams 

 

Path Variable은 url에 변수를 담아서 전달하는 것이다.

전달하는 방법은 useParams라는 hook을 사용하면 된다.

 

 

 예시 

 

 

예컨대 일기 리스트들 중 1번 일기(상세페이지)로 가려면, diary안에 있는 (id가 1인)  1번 다이어리로 가게끔 경로를 설정해야한다.

 

 

 

 

우선, url에 diary/1을 입력하면, 매칭되는 route가 없다고 뜬다.

diary/1처럼 1이라는 동적인 값을 처리하게 하기 위해서는 Path Variable을 사용해야한다.

Path Variable을 사용하려면 route에서 path 속성에 별도로 처리를 해줘야한다.

사용방법은, id로 쓸 부분을 /:id 로 적고, 뒤에 있는 id라는 이름으로 뒤에 있는 값을 전달하면 된다.

 

 

 App.js 

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

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 />} />  // 이렇게 쓰기
        </Routes>
        <RouteTest />
      </div>
    </BrowserRouter>
  );
}

export default App;

 

그런데, 이렇게 작성하면 /diary/:id는 무조건 /와 id를 받겠다라고 해둔 것이기 때문에

/diary 로 요청하면 아무것도 안나오게되는 문제가 발생한다.

따라서 별도로 처리를 해줘야한다. (id가 존재하지 않는 경우가 있다면 이렇게 예외 처리를 해주고, id가 다 있으면 안해줘도된다.)

 

 

 App.js 

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

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;

 

1이라는 Path Variable 꺼내서 사용하기 → useParams를 사용하면 된다!

useParams는 Custom Hooks(커스텀훅스)인데, Custom Hooks란  리액트가 제공하는 React Hooks는 아니지만, 별도의 라이브러리가 자신의 라이브러리의 기능을 더 편하게 이용할 수 있도록 만들어주는 사용자 정의 Hooks이다.

 

 

 Diary.js 

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

const Diary = () => {
 
 const {id} = useParams();
// useParams를 이용하면, 전달 받아서 들어오는 Path Variable들을 모아서 객체로 갖다주게 되는데,
// Path Variable를 id라고 부르기로 약속했기 때문에, id로 꺼내와야함
 
 
 return <div>
    <h1>Diary</h1>
    <p>이곳은 일기 상세 페이지입니다.</p>
  </div>
}

export default Diary;

 

 

id를 콘솔에 찍어보기

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;

 

 

 

 

 

---

 

 

 2. Query String - useSearchParams 

 

Query String은 웹페이지에 데이터를 전달하는 가장 간단한 방법이다.

Query String으로 전달을 하면, 별도의 처리를 안해줘도 자동으로 맵핑이 된다.
?뒤에 있는 경로들은 페이지 라우팅하는 경로에 영향을 안준다. 

* 참고) searchParams, setSearchParams는 이름 바꿔도 되지만, useSearhParams는 바꾸면 안된다.

 

 

 Query String 꺼내서 사용하는 법 

 

id 출력해보기

 Edit.js 

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


const Edit = () => {

  const [searchParams, setSearchParams] = useSearchParams();

  const id = searchParams.get('id');
  console.log(id);

  return <div>
    <h1>Edit</h1>
    <p>이곳은 일기 수정 페이지입니다.</p>
  </div>
}

export default Edit;

 

 

 

mode 출력해보기

 Edit.js 

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


const Edit = () => {

  const [searchParams, setSearchParams] = useSearchParams();

  const id = searchParams.get('id');
  console.log(id);

  const mode = searchParams.get('mode');
  console.log(mode);

  return <div>
    <h1>Edit</h1>
    <p>이곳은 일기 수정 페이지입니다.</p>
  </div>
}

export default Edit;

 

 

useSearchParams라는 리액트 라우터에 Query String을 처리하는 커스텀훅은 Path Variable을 처리하는 useParams훅과는 다르게 searchParams와 setSearchParams 두개로 전달받을 수 있는 배열을 반환하게됨

searchParams는 get을 통해서 전달받은 Query String을 꺼내서 쓸 수가 있는 용도로 사용

setSearchParams는 searchParams를 변경시키는 기능을 함

즉, Query String을 바꿀수 있게함

 

 

 Edit.js 

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


const Edit = () => {

  const [searchParams, setSearchParams] = useSearchParams();

  const id = searchParams.get('id');
  console.log(id);

  const mode = searchParams.get('mode');
  console.log(mode);

  return <div>
    <h1>Edit</h1>
    <p>이곳은 일기 수정 페이지입니다.</p>
    <button onClick={()=>setSearchParams({who:"haein"})}>QS 바꾸기</button>
  </div>
}

export default Edit;

 

 

 

---

 

 

 3. Page Moving - useNavigate 

 

useNavigate라는 훅은 페이지를 이동시킬수있는 기능을 하는 함수를 하나 반환해주는데,

그 함수의 이름을 navigate로 받아준다음,

navigate의 인자로 경로("/home)를 작성해주면, navigate함수를 호출해서 경로를 옮겨줄 수가 있다.

로그인 안된 사용자가 로그인페이지로 가려할 때 로그인 값을 검사해서 로그인 안했다면 로그인페이지로 강제로 보내버릴때 사용 가능 

 

 

 HOME으로 이동하기 

 

 Edit.js 

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


const Edit = () => {

  const navigate = useNavigate(); // useNavigate 써보기
  const [searchParams, setSearchParams] = useSearchParams();

  const id = searchParams.get('id');
  console.log(id);

  const mode = searchParams.get('mode');
  console.log(mode);

  return <div>
    <h1>Edit</h1>
    <p>이곳은 일기 수정 페이지입니다.</p>
    <button onClick={()=>setSearchParams({who:"haein"})}>QS 바꾸기</button>
    <button onClick={()=>{navigate('/home')}}>HOME으로 가기</button> // HOME으로 가기 버튼 추가
  </div>
}

export default Edit;

 

 

 

 

 뒤로가기 

 

navigate(-1) 하면 된다. 

 Edit.js 

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


const Edit = () => {

  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();

  const id = searchParams.get('id');
  console.log(id);

  const mode = searchParams.get('mode');
  console.log(mode);

  return <div>
    <h1>Edit</h1>
    <p>이곳은 일기 수정 페이지입니다.</p>
    <button onClick={()=>setSearchParams({who:"haein"})}>QS 바꾸기</button>
    <button onClick={()=>{navigate('/home')}}>HOME으로 가기</button>
    <button onClick={()=>{navigate(-1)}}>뒤로 가기</button> // 뒤로가기 버튼 추가
  </div>
}

export default Edit;