리액트 라우터는 리액트 애플리케이션에서 라우팅을 관리하는 데 효과적인 도구입니다. 그러나 때로는 특정 경로에 대한 접근을 제어하고자 할 수 있습니다. 이를 위해 리액트 라우터에서는 라우팅 퍼미션과 접근 제어 기능을 제공합니다. 이 기능은 인증된 사용자만 특정 경로에 접근할 수 있도록하거나, 특정 조건을 충족하는 경우에만 경로가 허용되도록 설정할 수 있습니다.

1. 인증된 사용자만 접근 허용하기

리액트 라우터를 사용하여 특정 경로에 대한 접근을 제한하려면, PrivateRoute 컴포넌트를 만들어야 합니다. 이 컴포넌트는 react-router-dom 패키지의 Route 컴포넌트를 확장하여 인증된 사용자만 해당 경로에 접근할 수 있도록 제한합니다.

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

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
    }
  />
);

export default PrivateRoute;

위의 코드에서 PrivateRoute 컴포넌트는 component prop과 isAuthenticated prop을 받습니다. isAuthenticated 값이 true인 경우에만 component prop으로 전달된 컴포넌트를 렌더링하고, 그렇지 않은 경우에는 /login 경로로 리디렉션합니다.

2. 조건에 따른 경로 접근 제어하기

리액트 라우터를 사용하여 특정 경로에 접근을 제어하는 또 다른 방법은, Route 컴포넌트의 render prop을 사용하는 것입니다. 이를 통해 특정 조건을 충족하는 경우에만 경로가 허용되도록 설정할 수 있습니다.

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

const ConditionalRoute = ({ component: Component, condition, redirectPath, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      condition ? <Component {...props} /> : <Redirect to={redirectPath} />
    }
  />
);

export default ConditionalRoute;

위의 코드에서 ConditionalRoute 컴포넌트는 component prop과 condition prop, 그리고 redirectPath prop을 받습니다. condition 값이 true인 경우에만 component prop으로 전달된 컴포넌트를 렌더링하고, 그렇지 않은 경우에는 redirectPath로 리디렉션합니다.

참고 자료

• React Router 공식 문서
• React Router 인증 예제
• React Router 조건부 라우팅 예제

위의 자료들은 리액트 라우터의 공식 문서와 인증 예제, 그리고 조건부 라우팅 예제를 제공하며, 더 자세한 내용을 확인할 수 있습니다.