[javascript] 리액트 라우터의 라우팅 유효성 검증 처리

04 Dec 2023

javascript

리액트 라우터는 싱글 페이지 애플리케이션(SPA)을 구축할 때 사용되는 라이브러리입니다. SPA는 페이지 전환이 일어날 때마다 서버로부터 새로운 HTML을 가져오지 않고, 자바스크립트로 동적으로 페이지를 업데이트하는 방식을 사용합니다. 리액트 라우터는 이러한 페이지 전환을 쉽고 간편하게 구현할 수 있도록 도와줍니다.

라우터를 사용하다 보면, 특정 페이지로의 접근을 허용할지 말지 결정하기 위해 라우팅 유효성 검증이 필요할 수 있습니다. 예를 들어, 로그인한 사용자만 접근할 수 있는 페이지로 이동하기 전에 사용자가 로그인한 상태인지 확인해야 할 수도 있습니다.

리액트 라우터에서 라우팅 유효성 검증을 처리하는 방법은 다음과 같습니다.

Route 컴포넌트의 render prop을 사용하여 검증 함수를 정의합니다.
```
import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isAuthenticated() ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);
```
위 코드에서 PrivateRoute는 인증된 사용자만 접근할 수 있는 페이지를 표시하는 컴포넌트입니다. isAuthenticated 함수는 사용자의 인증 상태를 확인하는 함수로, 로그인되어 있는지를 판단합니다. 만약 인증되지 않은 사용자라면 리다이렉트하여 로그인 페이지로 이동시킵니다.

PrivateRoute를 사용하여 보호해야 할 페이지를 정의합니다.

import React from 'react';
import { BrowserRouter, Switch } from 'react-router-dom';

import PrivateRoute from './PrivateRoute';
import HomePage from './HomePage';
import ProfilePage from './ProfilePage';
import LoginPage from './LoginPage';

const App = () => (
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={HomePage} />
      <PrivateRoute path="/profile" component={ProfilePage} />
      <Route path="/login" component={LoginPage} />
    </Switch>
  </BrowserRouter>
);

export default App;

위 코드에서 PrivateRoute를 사용하여 /profile 경로로 접근할 때만 ProfilePage 컴포넌트를 렌더링하도록 설정했습니다. 다른 경로들은 Route 컴포넌트를 사용하여 정의하면 됩니다.

이제 리액트 라우터를 사용하여 라우팅 유효성 검증을 처리할 수 있게 되었습니다. 페이지 전환 시 사용자의 인증 상태를 검증하여 보안과 접근 제어를 유지할 수 있습니다.

참고 자료