[react 리액트] useParams 동적 라우팅 구현

1. useParams ?

리액트 라우터에서 제공하는 훅으로 URL의 동적 경로 매개변수를 가져오는 역할을 함.
즉, 페이지 이동에 따라 고유한 다른 주소 값을 갖게 할 수 있음.

e.g. http://URL/라면/진라면매운맛

*라면은 path

*진라면 매운맛은 parameter 

 

 

 

2. useParams 사용하기

 

1) react-router-dom을 설치

npm install react-router-dom

 

 

 

2) 라우팅 구현할 페이지 생성 및 세부 페이지 생성

세부 페이지의 path에 :파라미터 값을 넣어준다.

e.g. path="/라면/:라면번호"

* 파라미터 값은 편의에 따라 다른 이름으로 써도 됨 (가능하면 맥락에 맞는 용어로)

 

 

📌 App 컴포넌트에 라우팅 구조를 구현하고 Day 컴포넌트를 세부페이지로 구현할건데 파라미터 이름은 day

import './App.css';

import Header from './component/Header';

import DayList from './component/DayList';

import Day from './component/Day';

import { BrowserRouter, Routes, Route } from 'react-router-dom';

import EmptyPage from './component/EmptyPage';

function App() {

  return (

    <BrowserRouter>

      <div className='App'>

        <Header />

        <Routes>

          <Route path="/" element={<DayList />}/>

          <Route path="/day/:day" element={<Day />}/> 여기를 보자

          <Route path="/*" element={<EmptyPage />}/>

        </Routes>

    </div>

    </BrowserRouter>

  );

}

export default App;

 

 

3) 세부 페이지에서 useParams 를 import 한다.

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

 

 

4) 가져온 useParams 정보를 하나의 변수에 저장하고 사용

const {day} = useParams();

* 이때 이 변수 이름은 <Route path="/day/:day" element={<Day />}/> 여기서의 이름과 동일해야 함.

* 변수에 선언은 해당 컴포넌트 함수 내부에 해야 함.

* 이때 전달받은 parameter는 String 으로 숫자로 활용하고 싶다면 Number()로 타입 변환을 해주자.

import dummy from "../db/data.json";

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

export default function Day(){

    const {day} = useParams();

    const wordList = dummy.words.filter(word => word.day === Number(day));

    return (

        <>

        <h1>day {day}</h1>

        <table>

        <tbody>

            {wordList.map((word)=>{

                return (

                <tr key={word.id}>

                <td>{word.eng}</td>

                <td>{word.kor}</td>

                </tr>

                )

            })}

        </tbody>

        </table>

        </>

    )

}

 

 

 

5) 주소를 확인해보면 파라미터로 1,2,3이 나오는 이유 (이해하는데 너무 오래걸림;)

http://localhost:3000/day/1
http://localhost:3000/day/2
http://localhost:3000/day/3

 

=== 클릭시 이동할 주소를 정하는 DayList 컴포넌트에서 그렇게 지정 함.

(dummy의 days 에서 day 값을 링크뒤에 붙이겠다고 함.)

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

import dummy from "../db/data.json";

0

function DayList(){

    return <ul className="day_list">

        {dummy.days.map((day) => {

            return <li key={day.id} className="dayList">

                <Link to={`/day/${day.day}`}>Day {day.day}</Link>

                </li>

        })}

    </ul>

}

export default DayList

data.json (DUMMY)

{

    "days" : [

        {"id": 1, "day": 1},

        {"id": 2, "day": 2},

        {"id": 3, "day": 3}

    ],

 

 

 

Dummy 의 day 값을 바꾸면??

{

    "days" : [

        {"id": 1, "day": "first"},

        {"id": 2, "day": "second"},

        {"id": 3, "day": "third"}

    ],

 

 

주소도 바뀌는 것을 알 수 있다.

http://localhost:3000/day/first
http://localhost:3000/day/second
http://localhost:3000/day/third