Colin's Blog
Redux Thunk를 활용한 인증 기능 구현 방법

소개

Redux Thunk는 Redux와 함께 비동기 작업을 처리하기 위한 미들웨어입니다. 이를 활용하여 인증 기능을 구현할 수 있습니다. 이 글에서는 Redux Thunk를 사용하여 사용자 인증 기능을 구현하는 방법에 대해 알아보겠습니다.

Step 1: Redux Thunk 설치 및 설정

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

npm install redux-thunk

설치가 완료되면, Redux Store를 생성할 때 Redux Thunk 미들웨어를 적용해야 합니다. 다음과 같이 src/store/index.js 파일을 수정하세요.

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

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

export default store;

Step 2: 사용자 인증 액션 생성자 함수 작성

사용자 인증에 관련된 액션 생성자 함수를 작성해야 합니다. 이 함수들은 비동기 작업을 처리하고, 인증 API와 통신하여 사용자를 인증하고 인증 정보를 Redux Store에 저장하는 역할을 합니다. 예를 들어, 아래와 같이 로그인을 처리하는 액션 생성자 함수를 작성할 수 있습니다.

import { loginUser } from '../api/auth';

export const login = (username, password) => {
  return async (dispatch) => {
    dispatch({ type: 'LOGIN_REQUEST' });

    try {
      const response = await loginUser(username, password);
      dispatch({ type: 'LOGIN_SUCCESS', payload: response.data });
    } catch (error) {
      dispatch({ type: 'LOGIN_FAILURE', payload: error.message });
    }
  };
};

위 예시에서 loginUser 함수는 실제로 인증 API와 통신하는 함수입니다. 이 함수를 사용하여 사용자의 로그인 정보를 확인하고, 성공 또는 실패에 따라 액션을 디스패치합니다.

Step 3: 리듀서 수정

인증과 관련된 상태를 관리하기 위해 리듀서를 수정해야 합니다. 이를 통해 인증에 성공했을 때 사용자 정보를 저장하고, 로그아웃할 때 사용자 정보를 삭제할 수 있습니다. 예를 들어, 다음과 같이 인증과 관련된 리듀서를 작성할 수 있습니다.

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

const authReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN_REQUEST':
      return { ...state, isLoading: true, error: null };
    case 'LOGIN_SUCCESS':
      return { ...state, isLoading: false, user: action.payload };
    case 'LOGIN_FAILURE':
      return { ...state, isLoading: false, error: action.payload };
    case 'LOGOUT':
      return { ...state, user: null };
    default:
      return state;
  }
};

export default authReducer;

Step 4: 컴포넌트에서 사용자 인증 액션 디스패치

마지막으로, 컴포넌트에서 사용자 인증 액션을 디스패치하여 사용자 인증을 처리할 수 있습니다. 예를 들어, 로그인 폼 컴포넌트에서 아래와 같이 사용자 인증 액션을 디스패치할 수 있습니다.

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { login } from '../actions/authActions';

const LoginForm = () => {
  const dispatch = useDispatch();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(login(username, password));
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button type="submit">Login</button>
    </form>
  );
};

export default LoginForm;

위 예시에서 dispatch(login(username, password)); 부분은 사용자 인증 액션을 디스패치하는 코드입니다. 사용자가 로그인 폼을 제출하면 해당 액션이 디스패치되고, Redux Thunk 미들웨어에 의해 비동기 작업이 처리됩니다.

결론

이와 같이 Redux Thunk를 활용하여 사용자 인증 기능을 구현할 수 있습니다. Redux Thunk를 사용하면 비동기 작업을 보다 간편하게 처리할 수 있고, 액션 생성자 함수에서 API와의 통신을 포함하여 복잡한 인증 로직을 구현할 수 있습니다. 이를 통해 프론트엔드 애플리케이션에서 사용자 인증 기능을 간편하게 관리할 수 있습니다.

참고 자료

© 2018 Colin. All rights reserved.