React에서 파라미터화된 라우팅을 구현하는 것은 동적인 웹 애플리케이션을 만드는 데 있어 매우 유용합니다. 이번 글에서는 React Router 라이브러리를 사용하여 파라미터화된 라우팅을 설정하는 방법을 단계별로 살펴보겠습니다.

기본 설정

먼저, React 프로젝트를 생성하고 React Router를 설치해야 합니다. 아래의 명령어를 사용하여 새로운 React 프로젝트를 만들고 React Router를 설치해 봅시다.

npx create-react-app my-app
cd my-app
npm install react-router-dom

프로젝트를 생성한 후, src 폴더 아래에 components 폴더를 만들고 그 안에 Home.js와 User.js 파일을 각각 생성합니다. Home.js는 기본 페이지로, User.js는 사용자의 정보를 표시하는 페이지로 사용할 것입니다.

React Router 설정

App.js 파일에서 React Router를 설정합니다. 아래와 같이 BrowserRouter, Routes, Route를 사용하여 라우팅을 구성합니다. 
// src/App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './components/Home';
import User from './components/User';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/user/1">User 1</Link>
        <Link to="/user/2">User 2</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/user/:userId" element={<User />} />
      </Routes>
    </Router>
  );
}

export default App;

위의 코드에서 Link 컴포넌트를 사용하여 내비게이션을 생성했습니다. 각 링크는 특정 사용자 ID를 가진 URL로 이동하도록 설정되어 있습니다. /user/:userId 경로에서 :userId는 URL 파라미터를 나타냅니다.

Home 컴포넌트

Home.js 파일은 간단한 메시지를 반환하는 컴포넌트입니다. 아래와 같이 작성합니다. 
// src/components/Home.js
import React from 'react';

function Home() {
  return (
    <div>
      <h1>Welcome to the Home Page</h1>
      <p>Select a user to view details.</p>
    </div>
  );
}

export default Home;

User 컴포넌트

User.js에서는 URL 파라미터를 이용하여 사용자의 정보를 표시합니다. useParams 훅을 사용하여 URL에서 userId를 가져옵니다. 
// src/components/User.js
import React from 'react';
import { useParams } from 'react-router-dom';

function User() {
  const { userId } = useParams();

  return (
    <div>
      <h1>User Details</h1>
      <p>User ID: {userId}</p>
      {/ 사용자 정보를 API에서 불러오거나 더 많은 데이터를 여기에 추가할 수 있습니다 /}
    </div>
  );
}

export default User;

위의 코드는 사용자가 선택한 사용자 ID를 화면에 표시합니다. 이 부분은 나중에 API를 연동하여 실제 사용자 정보를 가져오는 로직으로 확장할 수 있습니다.

이제 실행해 보세요!

모든 설정이 완료되었으므로, 이제 애플리케이션을 실행해 봅시다. 터미널에서 아래 명령어를 입력합니다.

npm start

브라우저에서 http://localhost:3000에 접속하면 홈 페이지가 나타납니다. 사용자 링크를 클릭하면 해당 사용자의 ID가 포함된 페이지로 이동합니다.

마무리

이번 글에서는 React Router를 이용하여 파라미터화된 라우팅을 구현하는 방법을 살펴보았습니다. 이 방식을 사용하면 사용자의 정보나 기타 동적 데이터를 효과적으로 처리할 수 있습니다. 실제 애플리케이션에서는 API와 통합하여 실질적인 사용자 정보를 제공할 수 있을 것입니다. 다양한 라우팅 패턴을 실험하고 사용자 경험을 극대화하는 방법에 대해 더 연구해 보시기 바랍니다.