Redux Thunk를 활용한 라우팅 로직 구현 방법

18 Oct 2023

redux

개요

라우팅은 웹 애플리케이션에서 사용자가 다른 뷰 또는 페이지로 이동하는 것을 가능하게 하는 핵심 기능입니다. Redux Thunk는 Redux 미들웨어로 사용되며, 비동기 작업을 처리하고 스토어의 상태를 업데이트하는 데 사용됩니다. 이 기능을 활용하여 라우팅 로직을 구현할 수 있습니다.

Redux Thunk 설치

먼저, 프로젝트에 Redux Thunk를 설치해야 합니다. 아래의 명령어를 사용하여 설치할 수 있습니다.

npm install redux-thunk

Redux Thunk 설정

Redux Store를 구성할 때, Redux Thunk 미들웨어를 추가해야 합니다. 아래의 예시를 참고하여 Redux Store를 설정해보겠습니다.

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunkMiddleware)
);

export default store;

위의 예시에서는 redux-thunk 패키지를 thunkMiddleware로 가져온 후, applyMiddleware 함수를 사용하여 Redux Store에 미들웨어를 추가했습니다.

라우팅 로직 구현

라우팅 로직을 구현하기 위해서는 Redux의 액션과 리듀서를 이용해 상태를 업데이트해야 합니다. 일반적으로는 라우팅 관련 액션과 리듀서를 따로 작성하여 사용합니다.

액션 작성

라우팅과 관련된 액션을 작성해야 합니다. 아래는 예시입니다.

// actionTypes.js
export const SET_CURRENT_ROUTE = "SET_CURRENT_ROUTE";

// actions.js
import { SET_CURRENT_ROUTE } from './actionTypes';

export const setCurrentRoute = (route) => {
  return {
    type: SET_CURRENT_ROUTE,
    payload: route
  };
};

위의 예시에서는 SET_CURRENT_ROUTE라는 액션 타입과 setCurrentRoute라는 액션 생성자 함수를 작성했습니다. setCurrentRoute 함수는 현재 라우트를 설정하기 위한 액션을 생성합니다.

리듀서 작성

라우팅과 관련된 리듀서를 작성해야 합니다. 아래는 예시입니다.

// reducers.js
import { combineReducers } from 'redux';
import { SET_CURRENT_ROUTE } from './actionTypes';

const currentRoute = (state = '', action) => {
  switch (action.type) {
    case SET_CURRENT_ROUTE:
      return action.payload;
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  currentRoute
});

export default rootReducer;

위의 예시에서는 currentRoute라는 상태를 업데이트하는 리듀서를 작성했습니다. SET_CURRENT_ROUTE 액션을 처리하여 현재 라우트를 업데이트합니다.

라우팅 사용

라우팅을 사용하기 위해서는 컴포넌트에서 Redux 상태와 액션을 사용해야 합니다. 아래는 예시입니다.

import React from 'react';
import { connect } from 'react-redux';
import { setCurrentRoute } from './actions';

const App = (props) => {
  const { currentRoute, setCurrentRoute } = props;

  const handleRouteChange = (route) => {
    setCurrentRoute(route);
  };

  return (
    <div>
      <h1>현재 라우트: {currentRoute}</h1>
      <button onClick={() => handleRouteChange('/home')}>홈</button>
      <button onClick={() => handleRouteChange('/about')}>소개</button>
      <button onClick={() => handleRouteChange('/contact')}>문의</button>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    currentRoute: state.currentRoute
  };
};

export default connect(mapStateToProps, { setCurrentRoute })(App);

위의 예시에서는 App 컴포넌트에서 currentRoute 상태와 setCurrentRoute 액션을 사용하고 있습니다. 버튼을 클릭하면 handleRouteChange 함수를 호출하여 현재 라우트를 변경합니다.

결론

Redux Thunk를 활용하여 라우팅 로직을 구현하는 방법에 대해 알아보았습니다. Redux Thunk를 사용하면 비동기 작업과 상태 업데이트를 쉽게 처리할 수 있으며, 라우팅과 관련된 액션과 리듀서를 작성하여 라우팅 로직을 관리할 수 있습니다. 이를 통해 웹 애플리케이션의 라우팅 기능을 구현할 수 있습니다.

해시태그: #Redux #Thunk