[React] 동적 라우팅과 URL 매개변수 처리

0️⃣ 들어가며

리액트 앱을 개발하다 보면 다른 페이지로 이동할 때 페이지 간 정보를 전달해야 하는 상황이 발생해요.
이때 동적 라우팅과 URL 매개변수를 활용하면 쉽게 정보를 전달하고 관리할 수 있어요.
이번 포스팅에서는 리액트에서 동적 라우팅을 어떻게 구현하는지 그리고 URL 매개변수를 어떻게 처리하는지 알아보겠습니다.

1️⃣ 세팅

1. React Router 설치하기

먼저 React Router를 설치해야 합니다. React Router는 리액트 앱에서 라우팅을 관리하는 데 사용됩니다.

npm install react-router-dom

2. 동적 라우팅 구현하기

동적 라우팅을 구현하기 위해서는 react-router-dom의 Route컴포넌트를 사용합니다.

🐸 : 아래 파일 구조대로 코드를 따라해보며 직접 해보면서 이해해봐요

• 파일구조 🗂️

📦src
 ┣ 📂pages
 ┃ ┣ 📜Home.jsx
 ┃ ┗ 📜Post.jsx
 ┣ 📜App.css
 ┣ 📜App.jsx
 ┣ 📜index.css
 ┗ 📜index.jsx

// App.js
import React from "react";
import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
import "./App.css";

import About from "./pages/About";
import Home from "./pages/Home";
import Post from "./pages/Post";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" exact element={<Home />} />
        <Route exact path="/post/:id" element={<Post />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

위의 코드에서 "/post/:id"와 같이 :id 부분은 URL의 매개변수로 사용됩니다. 이를 통해 Post 컴포넌트에서 해당 매개변수에 접근할 수 있습니다.

1. URL 매개변수 처리하기
   URL의 매개변수 값을 가져오기 위해서는 react-router-dom의 useParams 훅을 사용합니다.

// components/Post.js
import React from 'react';
import { useParams } from 'react-router-dom';

const Post = () => {
  let { id } = useParams();

  return (
    <div>
      <h2>Post ID: {id}</h2>
    </div>
  );
}

export default Post;

위의 코드에서 useParams 훅을 사용하여 URL의 매개변수를 가져와서 출력하고 있습니다.

<Route exact path="/post/:id" element={<Post />} 

다음 코드와 같이 path 에 url 뒤에 : 기호뒤에 params 키값으로 받고자 하는 변수를 입력하면 Post 페이지에서 useParams를 통해 : 뒤에 나오는 문자열을 통해 넘어오는 값을 받아서 처리할 수 있습니다

이제 동적 라우팅과 URL 매개변수 처리가 완료되었습니다. 위의 예제 코드를 참고하여 리액트 앱에서 페이지 간에 정보를 전달하는 방법을 익혀보세요. 이제 당신도 동적 라우팅과 URL 매개변수 처리에 대해 잘 이해하고 있습니다!