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

React Router-dom에서의 Outlet과 useLocation 사용

React Router-dom은 React 애플리케이션에서 라우팅 및 페이지 전환을 쉽게 관리할 수 있게 해주는 라이브러리입니다. 이 라이브러리에서 제공하는 Outlet과 useLocation은 특히 중요한 역할을 합니다. 이번에는 이 두 가지 기능에 대해 알아보도록 하겠습니다.

Outlet

Outlet은 React Router v6에서 도입된 특별한 컴포넌트입니다. 이 컴포넌트는 라우터에 의해 현재 경로에 맞는 컴포넌트를 렌더링하기 위해 사용됩니다. 보통 중첩된 라우트에서 사용되며, 부모 라우트 컴포넌트에서 Outlet을 사용하여 하위 라우트 컴포넌트를 렌더링합니다. 이를 통해 라우트 간의 계층 구조를 유지하면서 렌더링할 컴포넌트를 동적으로 결정할 수 있습니다.

useLocation

useLocation은 React Router v6에서 제공되는 훅(hook) 중 하나입니다. 이 훅을 사용하면 현재 페이지의 URL 정보를 가져올 수 있습니다. 주로 현재 경로를 기반으로 조건부 렌더링이나 다른 로직을 수행하기 위해 사용됩니다. 예를 들어, 현재 경로에 따라 특정 컴포넌트를 렌더링하거나, 특정 상태를 변경하는 등의 작업을 수행할 때 유용하게 활용될 수 있습니다.

 

예시

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

export default function MyComponent() {
    const { pathname } = useLocation();

    return (
        <div>
            <h2>Current Path: {pathname}</h2>
            <Outlet />
        </div>
    );
}

 

위 예시 코드에서는 useLocation을 사용하여 현재 경로 정보를 가져와서 출력하고 있습니다. 또한 Outlet을 사용하여 하위 라우트 컴포넌트를 렌더링하고 있습니다. 이렇게 함으로써 React Router-dom을 사용하여 다이내믹한 라우팅 및 페이지 전환을 간편하게 구현할 수 있습니다.

React Router-dom에서 Outlet과 useLocation은 라우팅 관련 작업을 보다 효율적으로 처리할 수 있게 해주는 중요한 기능들입니다. 이를 통해 사용자 경로에 따라 동적으로 컴포넌트를 렌더링하고, 애플리케이션의 유연성과 확장성을 높일 수 있습니다.