리액트 라우터는 리액트 애플리케이션에서 라우팅을 구현하기 위한 라이브러리입니다. 이 라이브러리는 제네릭 라우팅과 와일드카드 지원을 통해 유연하고 강력한 라우팅 기능을 제공합니다.

제네릭 라우팅

리액트 라우터에서 제네릭 라우팅은 동적인 라우트 매핑을 구현하는 기능입니다. 이를 통해 애플리케이션에서 동적으로 생성되는 많은 라우트를 편리하게 처리할 수 있습니다.

제네릭 라우팅은 $를 사용하여 동적인 URL을 표현합니다. 예를 들어, /user/$id와 같은 경로는 /user/1, /user/2, /user/3과 같은 다양한 값에 매칭됩니다.

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

const User = ({ match }) => {
  const { id } = match.params;

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

const App = () => (
  <Router>
    <div>
      <Route path="/user/:id" component={User} />
    </div>
  </Router>
);

export default App;

위의 예제에서는 /user/:id 경로에 도달하면 User 컴포넌트가 렌더링되고, 해당 경로의 id 값을 받아와서 보여줍니다.

와일드카드 지원

리액트 라우터는 와일드카드를 사용하여 특정 URL 패턴에 대해 일괄적으로 매칭하는 기능을 제공합니다. 이를 통해 동일한 처리 로직을 여러 경로에 적용할 수 있습니다.

와일드카드는 * 기호를 사용하여 표현합니다. 예를 들어, /dashboard/*와 같은 경로는 /dashboard/home, /dashboard/settings, /dashboard/posts와 같은 다양한 경로에 매칭됩니다.

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

const Dashboard = () => (
  <div>
    <h2>Dashboard</h2>
  </div>
);

const App = () => (
  <Router>
    <div>
      <Route path="/dashboard/*" component={Dashboard} />
    </div>
  </Router>
);

export default App;

위의 예제에서는 /dashboard/* 경로에 도달하면 Dashboard 컴포넌트가 렌더링됩니다. 경로의 다양한 값에 상관없이 동일한 컴포넌트가 사용됩니다.

결론

리액트 라우터의 제네릭 라우팅과 와일드카드 지원은 유연하고 강력한 라우팅 기능을 제공합니다. 이를 통해 다양한 라우트를 효과적으로 처리하고 관리하는데 도움을 줍니다.

더 자세한 내용은 리액트 라우터 공식 문서에서 확인할 수 있습니다.