React로 동적 라우팅 완벽 가이드

 

웹 애플리케이션을 개발할 때 사용자 경험(UX)을 향상시키기 위해서는 각 사용자의 요구에 따라 적합한 페이지를 제공하는 것이 중요합니다. 이를 위해 React의 동적 라우팅 기능은 매우 강력한 도구가 됩니다. 이번 글에서는 React에서 동적 라우팅을 구현하는 방법과 이를 활용한 실전 예제를 다뤄보겠습니다.

---

1. 동적 라우팅이란?

동적 라우팅(Dynamic Routing)은 URL 경로에 따라 다양한 데이터를 렌더링할 수 있는 기술입니다. React Router 라이브러리를 사용하면, 특정 경로의 파라미터를 기반으로 컴포넌트를 동적으로 생성할 수 있습니다. 이를 통해 사용자는 URL에 따라 맞춤형 정보를 제공받을 수 있습니다.

예를 들어, /user/:id라는 경로를 정의하면 id 값에 따라 다른 사용자 데이터를 보여줄 수 있습니다.
주요 특징:

• URL의 파라미터를 활용해 컴포넌트를 재사용.
• 특정 데이터에 따라 렌더링이 동적으로 이루어짐.
• SEO와 사용자 경험에 이점 제공.

---

2. React에서 동적 라우팅 설정하기

2.1 React Router 설치

React에서 동적 라우팅을 구현하려면 React Router 라이브러리가 필요합니다. 다음 명령어로 설치합니다.

npm install react-router-dom

2.2 기본적인 라우팅 설정

React Router를 활용하려면 BrowserRouter, Routes, 그리고 Route 컴포넌트가 필요합니다. 아래는 기본적인 설정 예제입니다.

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import User from './User';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </Router>
  );
};

export default App;

위 코드에서 /user/:id는 동적 라우팅이 적용된 경로입니다. :id는 URL의 동적 부분으로 사용자가 요청한 값에 따라 변경됩니다.

---

3. URL 파라미터 사용하기

URL 파라미터는 React Router의 useParams 훅을 사용하여 접근할 수 있습니다. 이를 활용해 사용자 데이터를 동적으로 가져오는 컴포넌트를 만들어보겠습니다.

3.1 useParams를 사용한 데이터 가져오기

아래는 User 컴포넌트의 예제입니다.

import React from 'react';
import { useParams } from 'react-router-dom';

const User = () => {
  const { id } = useParams();

  return (
    <div>
      <h1>사용자 정보</h1>
      <p>사용자 ID: {id}</p>
    </div>
  );
};

export default User;

useParams를 사용하면 URL에서 전달된 id 값을 쉽게 얻을 수 있습니다. 이를 통해 동적 데이터를 렌더링할 수 있습니다.

3.2 API를 활용한 데이터 로딩

실제 데이터베이스나 API와 연결하려면 useEffect와 useState를 사용합니다.

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

const User = () => {
  const { id } = useParams();
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    // API 호출
    fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
      .then((response) => response.json())
      .then((data) => setUserData(data));
  }, [id]);

  if (!userData) {
    return

로딩 중...

;
  }

  return (

{userData.name}의 정보

이메일: {userData.email}

전화번호: {userData.phone}

  );
};

export default User;

위 코드는 API에서 사용자 정보를 동적으로 가져와 화면에 출력하는 예제입니다.

---

4. Query Parameters와 동적 라우팅

동적 라우팅은 URL의 파라미터뿐만 아니라 Query Parameters도 활용할 수 있습니다. React Router의 useSearchParams 훅을 사용하여 Query Parameters를 처리할 수 있습니다.

Query Parameters 처리 예제

import React from 'react';
import { useSearchParams } from 'react-router-dom';

const Search = () => {
  const [searchParams] = useSearchParams();
  const keyword = searchParams.get('keyword');

  return (
    <div>
      <h1>검색 결과</h1>
      <p>검색 키워드: {keyword}</p>
    </div>
  );
};

export default Search;

이 코드는 /search?keyword=React와 같은 URL에서 Query Parameters를 읽어와 렌더링합니다.

---

5. 실전 활용 팁

5.1 네스티드 라우팅(Nested Routing)

동적 라우팅은 네스티드 라우팅과 결합하면 더욱 강력해집니다.

<Routes>
  <Route path="/user" element={<User />}>
    <Route path=":id/details" element={<UserDetails />} />
  </Route>
</Routes>

이와 같이 경로를 중첩하면 복잡한 애플리케이션 구조를 효율적으로 관리할 수 있습니다.

5.2 에러 처리

유효하지 않은 URL 파라미터를 처리하기 위한 404 페이지를 추가하세요.

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

---

결론

React의 동적 라우팅은 사용자 경험을 최적화하는 데 매우 유용한 도구입니다. useParams와 useSearchParams 훅을 통해 동적 데이터를 효율적으로 관리하고, API와 결합하여 실시간으로 데이터를 렌더링할 수 있습니다. 이 글에서 소개한 예제와 팁을 활용해 여러분의 프로젝트에 동적 라우팅을 적용해 보세요!