[javascript] 리액트 라우터의 라우팅 세션과 인증 관리 방법

04 Dec 2023

javascript

리액트 라우터는 단일페이지 애플리케이션(Single-Page Application, SPA)의 라우팅을 간편하게 관리할 수 있도록 도와주는 라이브러리입니다. 라우팅 세션과 인증은 사용자가 애플리케이션 내에서 다른 페이지로 이동할 때 중요한 역할을 합니다. 이번 포스트에서는 리액트 라우터를 사용하여 라우팅 세션과 인증을 관리하는 방법에 대해 알아보겠습니다.

1. 세션 관리

세션은 사용자가 애플리케이션에 접속하여 액세스할 수 있는 페이지의 상태입니다. 리액트 라우터는 BrowserRouter나 HashRouter와 같은 컴포넌트를 사용하여 세션을 관리합니다.

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

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/dashboard" component={DashboardPage} />
        <Route path="/profile" component={ProfilePage} />
      </Switch>
    </Router>
  );
}

위의 예제에서 Router 컴포넌트는 세션을 초기화하고, Route 컴포넌트는 개별 페이지로의 경로를 정의합니다. Switch 컴포넌트는 경로와 일치하는 첫 번째 Route를 렌더링하며, 경로에 대한 정확한 일치 여부를 확인합니다.

2. 인증 관리

인증은 사용자가 정당한 권한을 갖고 애플리케이션을 사용할 수 있는지 확인하는 과정입니다. 리액트 라우터는 인증을 관리하기 위해 PrivateRoute와 같은 커스텀 라우트를 정의할 수 있습니다.

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

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

위의 예제에서 PrivateRoute 컴포넌트는 authenticated 속성에 따라 해당 페이지를 렌더링하거나 로그인 페이지로 리다이렉션합니다.

<PrivateRoute
  path="/dashboard"
  component={DashboardPage}
  authenticated={isAuthenticated}
/>

위의 예제에서는 authenticated 속성을 isAuthenticated 상태값과 연결하여 사용자가 인증되었는지 확인합니다.

3. 인증 상태 관리

인증 상태는 애플리케이션 전반에서 유지되어야 합니다. 리액트 컴포넌트에서 인증 상태를 관리하기 위해 useState 훅을 사용할 수 있습니다.

import { useState } from 'react';

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <PrivateRoute
          path="/dashboard"
          component={DashboardPage}
          authenticated={isAuthenticated}
        />
        <Route path="/login" component={LoginPage} />
      </Switch>
    </Router>
  );
}

위의 예제에서 isAuthenticated 상태값과 setIsAuthenticated 함수를 사용하여 인증 상태를 업데이트할 수 있습니다.

결론

리액트 라우터를 사용하여 라우팅 세션과 인증을 관리하는 방법에 대해 알아보았습니다. 세션을 관리하기 위해 Router와 Route 컴포넌트를 사용하고, 인증을 관리하기 위해 PrivateRoute 컴포넌트를 활용했습니다. 또한, useState 훅을 사용하여 인증 상태를 관리하는 법을 살펴보았습니다.

이러한 기능을 활용하여 리액트 라우터를 통해 웹 애플리케이션의 라우팅 세션과 인증을 효과적으로 관리할 수 있습니다.

1. 세션 관리

2. 인증 관리

3. 인증 상태 관리

결론

참고 자료