[javascript] Redux와 라우터(Router)의 연동 방법은?

22 Nov 2023

javascript

Redux와 라우터(Router)를 함께 사용하는 경우, 애플리케이션의 상태 관리와 라우팅을 효율적으로 처리할 수 있습니다. Redux는 상태를 중앙에서 관리하는 패턴을 제공하고, 라우터는 클라이언트 사이드에서의 라우팅을 처리합니다. 이 두 기술을 결합하여 사용하면, 애플리케이션의 상태와 라우팅을 일관되게 관리할 수 있습니다.

Redux와 라우터를 연동하기 위해 일반적으로 react-router-redux 패키지를 사용합니다. 이 패키지를 사용하면 Redux와 라우터를 쉽게 연결할 수 있습니다. 다음은 Redux와 라우터의 연동 방법에 대한 간단한 예제입니다:

먼저, react-router-redux 패키지를 설치합니다:

npm install react-router-redux

Redux 스토어를 생성합니다:

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { routerReducer, routerMiddleware } from 'react-router-redux';
import { createBrowserHistory } from 'history';

// 기타 리듀서들을 import 합니다.
import rootReducer from './reducers'; 

// 브라우저 히스토리 객체 생성
const history = createBrowserHistory();

// 라우터 미들웨어 설정
const middleware = routerMiddleware(history);

// 루트 리듀서와 미들웨어를 결합하여 스토어 생성
const store = createStore(
  combineReducers({
    ...rootReducer,
    router: routerReducer
  }),
  applyMiddleware(middleware)
);

라우터를 정의한 컴포넌트를 생성합니다:

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

// 각 페이지 컴포넌트를 import 합니다.
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
// ...

const AppRouter = () => (
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/about" component={AboutPage} />
    {/* 추가적인 라우트들 */}
  </Switch>
);

export default AppRouter;

ReactDOM.render로 애플리케이션을 렌더링하는 과정에서 ConnectedRouter를 사용하여 Redux와 라우터를 연동합니다:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';

import store from './store';
import AppRouter from './AppRouter';

const history = createBrowserHistory();

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <AppRouter />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

이렇게 Redux와 라우터를 연동하면, Redux의 상태를 라우터를 통해 변경할 수 있으며, 라우터의 이동에 따라 Redux의 상태에 변화가 생길 때마다 컴포넌트를 업데이트할 수 있습니다.

참고: react-router-redux GitHub 페이지