Redux Toolkit을 활용한 자바스크립트 앱의 인증 코드 발송 기능

21 Sep 2023

javascript

Redux Toolkit은 자바스크립트 앱의 상태 관리와 리덕스 액션 및 리듀서를 간편하게 작성할 수 있게 해주는 도구입니다. 이번 글에서는 Redux Toolkit을 사용하여 자바스크립트 앱에서 인증 코드를 발송하는 기능을 구현하는 방법에 대해 알아보겠습니다.

1. Redux Toolkit 설치 및 설정

먼저, Redux Toolkit을 설치하기 위해 프로젝트 루트 경로에서 다음 명령을 실행합니다:

npm install @reduxjs/toolkit

설치가 완료되었다면, src 폴더 내에 store 폴더를 생성하고, 그 안에 authSlice.js 파일을 생성합니다.

2. 인증 코드 발송 액션 생성

authSlice.js 파일에 아래 코드를 추가하여 인증 코드 발송 액션을 생성합니다:

import { createSlice } from '@reduxjs/toolkit';

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    code: '',
  },
  reducers: {
    setCode: (state, action) => {
      state.code = action.payload;
    },
  },
});

export const { setCode } = authSlice.actions;

export default authSlice.reducer;

위 코드에서는 createSlice 함수를 사용하여 auth 슬라이스를 생성하고, setCode 리듀서를 정의합니다. setCode 리듀서는 code 값을 변경하는 역할을 수행합니다.

3. 코드 발송 기능 추가

authSlice.js 파일에 아래 코드를 추가하여 코드 발송 기능을 구현합니다:

export const sendCode = (email) => async (dispatch) => {
  try {
    // 인증 코드 전송 로직

    const response = await fetch('api/send-code', {
      method: 'POST',
      body: JSON.stringify({ email }),
      headers: { 'Content-Type': 'application/json' },
    });

    const data = await response.json();

    // 발송한 코드 리덕스 스토어에 저장
    dispatch(setCode(data.code));
  } catch (error) {
    console.error('Error sending code:', error);
  }
};

위 코드에서는 sendCode 비동기 액션 생성자 함수를 정의합니다. 이 함수는 ‘api/send-code’ 엔드포인트로 POST 요청을 보내고, 응답 데이터의 code 값을 리덕스 스토어에 저장합니다.

4. 앱에서 인증 코드 발송 기능 호출

앱의 관련 컴포넌트에서 sendCode 액션을 호출하여 인증 코드 발송 기능을 실행할 수 있습니다. 예를 들어, 아래와 같이 사용할 수 있습니다:

import { useDispatch } from 'react-redux';
import { sendCode } from '../store/authSlice';

function AuthPage() {
  const dispatch = useDispatch();

  const handleSendCode = (email) => {
    dispatch(sendCode(email));
  };

  // ...

  return (
    <div>
      <input type="email" onChange={(e) => setEmail(e.target.value)} />
      <button onClick={() => handleSendCode(email)}>
        Send Code
      </button>
    </div>
  );
}

export default AuthPage;

위 코드에서는 useDispatch Hook을 사용하여 sendCode 액션을 디스패치하고, 이를 클릭 이벤트 핸들러에서 호출합니다.

마치며

이렇게 Redux Toolkit을 사용하여 자바스크립트 앱에서 인증 코드 발송 기능을 구현할 수 있습니다. Redux Toolkit은 리덕스 관련 코드를 간편하게 작성하고 관리하는 데에 많은 도움이 됩니다. 추가적으로, 이 코드를 통해 리덕스 스토어의 code 값을 관리하고, 앱의 다른 부분에서 사용할 수 있습니다.

#webdevelopment #javascript