[javascript] 리액트 프로젝트에서 리덕스 미들웨어 로그인 처리 방법

22 Dec 2023

javascript

리액트 프로젝트에서 사용자 로그인 처리에 대한 중요한 부분 중 하나는 리덕스를 통해 상태를 관리하고, 미들웨어를 사용하여 비동기 작업을 처리하는 것입니다. 이를 통해 로그인 과정에서 서버와의 통신 및 사용자 상태를 효율적으로 관리할 수 있습니다.

리덕스 미들웨어란 무엇인가?

리덕스 미들웨어는 액션을 디스패치한 후, 리듀서에서 상태가 변경되기 전에 추가적인 작업을 수행하게 해주는 기능입니다. 이는 비동기 작업, 로깅, 예외 처리 등을 수행할 수 있도록 도와줍니다.

Redux-Thunk를 사용한 비동기 작업 처리

Redux-Thunk는 리덕스 미들웨어의 한 종류로, 액션 생성자에서 비동기 작업을 수행할 수 있도록 해줍니다. 아래는 간단한 예제 코드입니다.

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

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

로그인 처리 예제

다음은 리액트에서 리덕스를 사용하여 사용자 로그인 처리를 수행하는 예제 코드입니다.

actions/authActions.js

import axios from 'axios';

export const login = (username, password) => {
  return (dispatch) => {
    dispatch({ type: 'LOGIN_REQUEST' });
    axios.post('api/login', { username, password })
      .then((response) => {
        dispatch({ type: 'LOGIN_SUCCESS', payload: response.data });
      })
      .catch((error) => {
        dispatch({ type: 'LOGIN_FAILURE', payload: error });
      });
  };
};

reducers/authReducer.js

const initialState = {
  isLoggedIn: false,
  user: null,
  error: null
};

const authReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN_REQUEST':
      // 로그인 요청 중 상태 처리
      return {
        ...state,
        error: null
      };
    case 'LOGIN_SUCCESS':
      // 로그인 성공 상태 처리
      return {
        ...state,
        isLoggedIn: true,
        user: action.payload,
        error: null
      };
    case 'LOGIN_FAILURE':
      // 로그인 실패 상태 처리
      return {
        ...state,
        isLoggedIn: false,
        user: null,
        error: action.payload
      };
    default:
      return state;
  }
};

export default authReducer;

이 예제에서는 redux-thunk를 사용하여 비동기 처리를 하고 있습니다. authActions.js 파일에서 login 액션을 생성하여, 비동기적으로 로그인 요청을 수행한 후, 그에 따른 액션을 디스패치합니다. 해당 액션에 대한 처리는 authReducer.js에서 이루어지며, 상태를 변경합니다.

리액트 프로젝트에서는 이러한 방식으로 리덕스와 미들웨어를 사용하여 로그인 처리 및 기타 비동기 작업을 효과적으로 관리할 수 있습니다.

참고 자료: Redux 공식 문서