WithConditionAccess

WithConditionAccess는 특정 조건을 만족할 때만 지정된 라우트로의 접근을 허용하는 Higher-Order Component (HOC)입니다. 이 HOC는 React Router와 함께 사용되어, 인증된 사용자만 특정 페이지에 접근할 수 있도록 제한하는 등의 용도로 활용될 수 있습니다

Parameter

• AccessComponent (ComponentType<P>): 접근을 허용할 컴포넌트.
• conditionFn (() => boolean): 접근 조건을 검사하는 함수. 이 함수가 true를 반환하면 AccessComponent에 접근을 허용합니다.
• RedirectTo (string): conditionFn이 false를 반환할 경우 리디렉션될 경로. 기본값은 '/not-found'.

Return

조건에 따라 접근을 제한하는 컴포넌트를 반환합니다. 조건이 true일 경우 AccessComponent를 렌더링하고, 그렇지 않을 경우 RedirectTo 경로로 리디렉션합니다.

Example

// App.jsx
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import WithConditionAccess from './WithConditionAccess';
import AdminPage from './AdminPage';
import LoginPage from './LoginPage';
import NotFoundPage from './NotFoundPage';

const App = () => {
  const isAdmin = /* 관리자 여부 확인 로직 */;

  const AdminPageAccess = WithConditionAccess(AdminPage, {
    conditionFn: () => isAdmin,
    RedirectTo: '/login'
  });

  return (
    <Router>
      <Switch>
        <Route exact path="/" component={LoginPage} />
        <Route path="/admin" component={AdminPageAccess} />
        <Route path="/not-found" component={NotFoundPage} />
      </Switch>
    </Router>
  );
};

export default App;

import { ComponentType } from 'react';
import { Redirect, RouteComponentProps } from 'react-router-dom';

interface WithConditionAccessProps<P> {
  AccessComponent: ComponentType<P>;
  conditionFn: () => boolean;
  RedirectTo?: string;
}

function WithConditionAccess<P extends RouteComponentProps>({
  AccessComponent,
  conditionFn,
  RedirectTo = '/not-found',
}: WithConditionAccessProps<P>) {
  return (props: P) => {
    if (conditionFn()) {
      return <AccessComponent {...props} />;
    }

    return <Redirect to={RedirectTo} />;
  };
}

export default WithConditionAccess;