쿠팡이츠, React Router v6에 대해 간략하게 알아보기

shooting star·2024년 5월 11일

쿠팡이츠 클론코딩(ft.프론트엔드)

목록 보기

3/16

들어가며

React Router는 React 기반 애플리케이션에서 라우팅을 구현하기 위한 필수 라이브러리입니다. 싱글 페이지 애플리케이션(SPA)의 사용자 경험을 향상시키는 이 라이브러리는 페이지를 리로드하지 않고도 동적으로 클라이언트 사이드의 라우트를 관리합니다. 최근 출시된 React Router v6는 성능 향상, API의 단순화 및 타입 지원 강화 등 여러 면에서 개선되었습니다.

React Router v6의 새로운 기능

BrowserRouter

BrowserRouter는 HTML5 history API를 사용하여 UI 업데이트와 URL 동기화를 관리합니다. 주로 웹 애플리케이션에 사용되며, URL이 변경될 때 페이지를 새로 고치지 않고 라우팅을 수행합니다.

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

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

createBrowserRouter

createBrowserRouter는 React Router v6에서 도입된 새로운 함수로, 라우터 객체를 생성하는 데 사용됩니다. 이 함수를 통해 라우트 구성을 더 선언적으로 정의할 수 있습니다.

import { createBrowserRouter, RouterProvider, Route } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
    errorElement: <NotFound />
  }
]);

function App() {
  return <RouterProvider router={router} />;
}

useNavigate

useNavigate 훅은 프로그래밍 방식으로 네비게이션을 실행할 수 있게 해줍니다. 폼 제출 후 다른 페이지로 리디렉트하는 작업에 유용합니다.

import { useNavigate } from 'react-router-dom';

function LoginForm() {
  let navigate = useNavigate();

  function handleSubmit(event) {
    event.preventDefault();
    // 로그인 로직 후
    navigate('/dashboard');
  }

  return <form onSubmit={handleSubmit}>...</form>;
}

useParams

useParams 훅은 동적 라우트 매개변수를 읽을 수 있게 해줍니다. URL의 일부로 제공된 데이터를 가져와 페이지에 표시하는 데 사용됩니다.

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

function UserProfile() {
  let { userId } = useParams();
  return <div>User profile for user: {userId}</div>;
}

Outlet

Outlet 컴포넌트는 중첩된 라우트 구조에서 사용됩니다. 부모 라우트 컴포넌트 내에서 Outlet을 배치하면, 자식 라우트의 컴포넌트가 해당 위치에서 렌더링됩니다.

import { Outlet, Route } from 'react-router-dom';

function Layout() {
  return (
    <div>
      <nav>...</nav>
      <Outlet />  // 자식 라우트가 여기에 렌더링됩니다.
    </div>
  );
}

useOutletContext

useOutletContext 훅은 중첩된 라우트 사이에서 데이터를 공유할 수 있게 해줍니다. 상위 라우트에서 정의된 데이터를 하위 라우트의 컴포넌트에서 접근할 수 있습니다.

import { Route, useOutletContext } from 'react-router-dom';

function ParentComponent() {
  return <

Route context={{ user: 'Jane Doe' }} element={<ChildComponent />} />;
}

function ChildComponent() {
  const { user } = useOutletContext();
  return <div>Logged in as: {user}</div>;
}