[React] useNavigate, useParams로 동적라우팅(Dynamic Routing) 하기 (GET - URL에 파라미터)

페이지는 똑같은데, 안에서 렌더되는 데이터만 다른 페이지들 있죠!

예를 들어, 유튜브의 각 영상 상세페이지가 있겠네요. 🤩

 

이렇게 Routes의 경로(URL)에 특정 매개변수를 넣어서 해당 페이지로 이동할 수 있게 하는 거죠.

 

제가 구현한 방법을 작성하겠습니다.

우선 순서는 이렇게 됩니다.

1. url의 매개변수를 통해 데이터가 다르게 렌더될 페이지(A) 구현
   1. (A)로 갈 수 있도록 <Route path = "주소/:id" component={(A)} /> 추가
2. 페이지(B)에서 데이터의 id를 매개변수로 useNavigate 사용하여 (A)로 이동
3. (A)의 현재 url에서 매개변수를 뽑아서 데이터 GET 요청 보내기

 

 

00. 렌더할 페이지 구현

---

A.js

import * as React from "react";

export default function A() {
  return (
    <div>
      <h1>(A) 페이지</h1>
    </div>
  );
}

 

Router.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
import A from "./A";

const AppRouter = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="a/:id" element={<A />} />
      </Routes>
    </BrowserRouter>
  );
};

export default AppRouter;

간단하게 우선! a 에서 렌더되도록 했고, id에 따라 데이터가 다른 페이지가 렌더 되도록 url을 설정했습니다.

 

: 는 뒤에 변수가 올 것이다! 라고 표기하는 겁니다.
: 뒤엔 임의의 변수를 작성해주시면 됩니다. 저는 id로 했습니다 🤩🤩

 

 

01. 데이터의 id를 매개변수로 useNavigate 사용하여 페이지 이동

---

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

export default function B() {
  /** 페이지 이동 hook */
  const navigate = useNavigate();

  /** 퀴즈 페이지로 */
  function handlePage() {
    navigate(`/a/${id}`);
  }
  
  return (
    <div>
      <h1>(B) 페이지</h1>
      <button onClick={handlePage}>A로 가기</button>
    </div>
  );
}

 

✨✨✨ handlePage에 있는 navigate 속 url이 중요합니다!!✨✨✨

그러니까, 매개변수 url 설정은 자신이 보내려는 주소에 맞게 잘 설정해주시길 바랍니다!

예를 들어, 아래는 id가 1인 A 페이지입니다.

 

1. 현재 페이지를 상위로 매개변수를 보내 url 렌더(현재 B 페이지에서 렌더 -> /b/a/1)

2. 현재 페이지와 상관없이 매개변수를 보내 렌더할 페이지url 렌더(현재 B 페이지 상관 x -> /a/1)

 

02. 현재 url에서 매개변수를 뽑아내기

---

예를 들어, 매개변수 1을 가지고 A 페이지로 왔다고 합시다!

그렇다면, 현재 페이지의 url은 /a/1 이네요!

1은 아까 Route에서 설정한 <Route path="a/:id" element={<A />} />의 매개변수 자리에 잘 들어있네요!

 

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

useParams는 현재 URL에 포함되어있는 Key, Value 형식의 객체를 반환해주는 역할을 합니다.

그렇다면, 위와 같이 해서 url에 있는 1을 뽑아낼 수 있습니다!!

{ id }는 Route에서 설정한 임의의 변수 이름이죠! ☺️☺️

 

 

03.  매개변수 사용해서 데이터 GET 요청 보내기

---

import * as React from "react";
import { useParams } from "react-router-dom";

export default function A() {
  const { id } = useParams();

  /** API */
  async function loadData() {
    /** get param */
    let params = {
      id: id
    };

    await API함수명(params).then((res) => {
      console.log(res);
    });
  }

  return (
    <div>
      <h1>(A) 페이지</h1>
    </div>
  );
}

이렇게 해서, get 요청 API함수에 매개변수로 보내줍시다.

 

import axios from "axios";

/** get API */
async function API함수명(params = {}) {
  let data;
  try {
    await axios
      .get(`API요청주소/${params.id}`)
      .then((response) => {
        // console.log(response);
        data = response.data;
      });
    return data;
  } catch (error) {
   ...
  }
}

export default API함수명;

API 요청을 보낼 주소에 변수를 삽입해줍니다.

 

그럼,, 데이터를 잘 받으실 수 있으리라,, 믿습니다!

 

화이팅 🌞🌞