[javascript] 리액트 라우터의 라우팅 디자인과 패턴

04 Dec 2023

javascript

리액트 라우터(React Router)는 싱글 페이지 애플리케이션(Single Page Application)에서 라우팅을 관리하기 위해 사용되는 라이브러리입니다. 리액트 라우터를 통해 사용자가 다른 URL로 이동할 때 컴포넌트를 동적으로 로드하여 라우터를 관리할 수 있습니다.

리액트 라우터의 라우팅 디자인과 패턴은 애플리케이션의 구조와 사용자 경험에 중요한 영향을 미칩니다. 따라서 올바른 라우팅 디자인과 패턴을 선택하고 사용하는 것은 애플리케이션의 성능과 유지 보수성을 향상시키는 데 도움이 됩니다.

1. 중첩 라우팅 (Nested Routing)

중첩 라우팅은 여러 레벨의 URL을 사용하여 애플리케이션을 구성하는 방법입니다. 이 패턴은 대규모 애플리케이션에서 주로 사용되며, 각 레벨의 URL에 해당하는 컴포넌트를 로드하여 화면을 구성하는 방식입니다.

예를 들어, /users URL은 사용자 목록을 보여주는 컴포넌트를 로드하고, /users/:userId URL은 특정 사용자의 상세 정보를 보여주는 컴포넌트를 로드한다고 가정해봅시다. 이러한 구조를 중첩 라우팅을 통해 구현할 수 있습니다.

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

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/users" component={UserList} />
        <Route path="/users/:userId" component={UserDetail} />
      </Switch>
    </Router>
  );
};

2. 동적 라우팅 (Dynamic Routing)

동적 라우팅은 URL에 동적으로 변경되는 값(parameter)을 포함하는 방식입니다. 이 패턴은 사용자가 다른 리소스를 요청할 때마다 해당 리소스에 대한 정보를 동적으로 로드하는 데 사용됩니다.

예를 들어, /products/:productId URL은 특정 상품의 상세 정보를 보여주는 컴포넌트를 로드한다고 가정해봅시다. 이러한 경우에는 동적 라우팅을 통해 URL의 :productId 부분에 해당하는 값을 가져와서 상세 정보를 로드할 수 있습니다.

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

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/products/:productId" component={ProductDetail} />
      </Switch>
    </Router>
  );
};

3. 보호된 라우팅 (Protected Routing)

보호된 라우팅은 인증이 필요한 페이지에 대한 접근을 제어하는 방식입니다. 이 패턴은 로그인이 필요한 페이지를 구현하는 데 사용됩니다. 사용자가 로그인하지 않은 상태로 보호된 페이지에 접근하려고 할 때는 로그인 페이지로 리디렉션됩니다.

// AuthProvider.js
import React, { createContext, useState } from 'react';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <AuthContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
      {children}
    </AuthContext.Provider>
  );
};

// ProtectedRoute.js
import { Route, Redirect } from 'react-router-dom';
import { AuthContext } from './AuthProvider';

const ProtectedRoute = ({ component: Component, ...rest }) => {
  const { isLoggedIn } = useContext(AuthContext);

  return (
    <Route
      {...rest}
      render={(props) =>
        isLoggedIn ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
};

// App.js
import { BrowserRouter as Router, Switch } from 'react-router-dom';
import { AuthProvider } from './AuthProvider';
import ProtectedRoute from './ProtectedRoute';

const App = () => {
  return (
    <AuthProvider>
      <Router>
        <Switch>
          <ProtectedRoute path="/protected" component={ProtectedPage} />
        </Switch>
      </Router>
    </AuthProvider>
  );
};

결론

리액트 라우터의 라우팅 디자인과 패턴은 애플리케이션의 구조와 사용자 경험에 큰 영향을 미칩니다. 중첩 라우팅, 동적 라우팅, 보호된 라우팅 등 다양한 패턴을 사용하여 애플리케이션의 요구사항에 맞게 라우팅을 구현할 수 있습니다. 적절한 라우팅 패턴을 선택하고 사용하여 리액트 라우터를 효과적으로 활용해보세요.