[React] useRoutes 를 사용한 Routing

useRoutes는 React Router v6에서 도입되어 프로그래매틱 방식으로 라우팅 규칙을 정의할 수 있게 해주는 훅입니다. 이를 통해, 라우트 구성을 코드의 다른 부분에서 쉽게 재사용할 수 있으며, 조건부 라우팅 등 더 동적인 라우팅 시나리오를 구현할 수 있습니다.

useRoutes 사용하기

먼저, react-router-dom을 설치해야 합니다. 프로젝트에 이미 설치되어 있지 않다면, 다음 명령어를 사용하여 설치하세요.

npm install react-router-dom

라우트 구성 정의

useRoutes를 사용하기 위해서는 라우트를 객체 배열 형태로 정의해야 합니다. 각 객체는 path와 element, 그리고 선택적으로 children을 포함할 수 있습니다. children은 중첩된 라우트를 정의할 때 사용됩니다.

import { useRoutes } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

const routes = [
  { path: "/", element: <Home /> },
  { path: "/about", element: <About /> },
  { path: "*", element: <NotFound /> }
];

useRoutes 훅 사용

정의된 라우트 구성을 useRoutes 훅과 함께 사용하여, 라우트에 해당하는 컴포넌트를 렌더링합니다. useRoutes는 라우트 구성을 인자로 받아, URL과 일치하는 라우트의 element를 반환합니다.

function App() {
  const element = useRoutes(routes);
  return element;
}

애플리케이션에 적용하기

useRoutes를 사용하는 애플리케이션의 최상위 컴포넌트는 BrowserRouter로 감싸야 합니다. 이를 통해 React 애플리케이션에서 라우팅 기능을 활성화할 수 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

결론

useRoutes 훅은 React Router v6에서 소개된 강력한 기능으로, 라우트 구성을 더 유연하게 관리할 수 있게 해줍니다. 코드의 다른 부분에서 라우트 구성을 재사용하거나, 동적으로 라우트를 생성하는 등 다양한 시나리오에 유용하게 사용될 수 있습니다. 이 가이드가 useRoutes를 사용하여 React 애플리케이션에서 라우팅을 구현하는 데 도움이 되기를 바랍니다.