사전캠프 5주차(6/26) TIL

useParams

• useParams는 react-router-dom 라이브러리에서 제공하는 Hook으로 동적으로 라우팅을 생성하기 위해 사용한다.
• 리액트 라우터 라이브러리에서 제공하는 함수이고, Route path 와 일치하는 현재 URL에서 동적 매개변수의 키/값 쌍의 개체를 반환한다.

사용법

// App.jsx

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import './App.css';
import Home from './routes/Home';
import Detail from './routes/Detail';
import Context from './context/context';

function App() {
  return (
    <Context>
      <Router>
        <Routes>
          <Route path="/" exact element={<Home />} />
          <Route path="/detail/:id" element={<Detail />} />
        </Routes>
      </Router>
    </Context>
  );
}

export default App;

라우팅을 구현할 페이지를 생성한 뒤에, :id처럼 객체의 key값을 라우터의 path로 설정한다. key값은 개발자의 편의에 따라 다른 명칭으로 만들 수 있다.

// List.jsx

import { useEffect, useContext, useState } from 'react';
import { Link } from "react-router-dom";
import { Context } from '../context/context';

export default function Home() {
  const context = useContext(Context);
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('../data.json')
    .then(res => res.json())
    .then(res => {
      context.data = res.data;
      setData(res.data);
    })
  }, [])

  return (
    <section>
      {data.map(item => (
        <Link to={`/detail/${item.id}`} key={item.id}>
          <h2>{item.title}</h2>
        </Link>
      ))}
    </section>
  )
}

그리고 리스트 페이지에서 Link 값에 넘겨줄 id 정보를 담아준다. 이 정보는 객체의 value 값으로 파라미터로 넘겨지는 데이터는 key와 value 값을 가진 객체 형태로 넘겨진다는 것을 알 수 있다.
이렇게 구성해준 뒤 리스트 중 하나를 클릭하게 되면 id 값을 파라미터로 가지고 라우팅이 이루어진다.

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

import { useContext } from "react";
import { useParams } from "react-router-dom";
import { Context } from "../context/context";

export default function Detail() {
  const {id} = useParams();
  const context = useContext(Context);

  return (
    <section>
      <h1>{context.data[id].title}</h1>
      <p>{context.data[id].description}</p>
    </section>
  )
}

참고한 글 : https://babycoder05.tistory.com/entry/useParams