[TIL] React-Router useParams hook

useParams

react-router에서 제공하는 Hooks 중 하나로 React 16.8버전 이상에서만 구동이 가능하다. Parameter(파라미터)값을 URL을 통해서 넘겨서 넘겨받은 페이지에서 사용할 수 있도록 도와준다.

여러 개의 Detail페이지에 담겨있는 데이터를 출력해준다는 가정할 때, 세부 페이지로 이동하도록 구현한다면, id값을 URL로 넘겨 세부 페이지에 id값에 해당하는 데이터 정보만 출력할 수 있게 도와준다.

Router-Dom 설치

npm install react-router-dom
yanr add react-router-dom

useParams 사용

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Detail from "../pages/Detail";
import Home from "../pages/Home";

export default function Router({ todos, setTodos }) {
  return (
    <BrowserRouter>
        <Routes>
          <Route
            path="/"
            element={<Home todos={todos} setTodos={setTodos} />}
          />
          <Route
            path="/detail/:id"
            element={<Detail todos={todos} setTodos={setTodos} />}
          />
        </Routes>
    </BrowserRouter>
  );
}

라우팅을 구현할 페이지들을 생성한 뒤에 디테일페이지의 path에 :id 값을 넣어준다. 여기서 id는 객체의 key 값으로 개발자의 편의에 따라 다른 면칭으로 만들 수 있다.

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { TodoType } from "../types/todoType";

export default function Detail({ todos, setTodos }) {
  const [todo, setTodo] = useState();
  
  const params = useParams();

  useEffect(() => {
    if (params.id) {
      const findToDo = todos.find(
        (todo: TodoType) => todo.id === Number(params.id)
      );
      setTodo(findToDo);
    }
  }, [todos, params.id]);

  const handleRemoveBtn = (id) => {
    setTodos(
      todos.filter((todo: TodoType) => {
        return todo.id !== id;
      })
    );
  };

  return (
    <>
      <button onClick={() => handleRemoveBtn(todo.id)}>삭제</button>
    </>
  );
}

파라미터로 넘겨지는 id값에 따라 원하는 데이터를 불러 올 수 있다. 불러올 때 useParams를 이용해서 id값을 가져오고 그 데이터 값을 이용해서 세부 페이지에서 활용하는 구조로 만들면 된다. 여기서 id는 객체의 key값으로 아래와 같이 비구조화 할당으로 꺼내 쓸 수 있다.