Redux Thunk는 Redux의 미들웨어 중 하나로, 비동기 작업을 처리하기 위해 사용됩니다. 폼 유효성 검사 로직 또한 비동기 작업으로 처리될 수 있으며, Redux Thunk를 활용하면 이를 구현할 수 있습니다.
1. Redux Thunk 설치 및 설정
먼저, Redux Thunk를 설치해야합니다. 아래의 명령어를 사용하여 설치할 수 있습니다.
npm install redux-thunk
설치가 완료되면, Redux Store를 생성할 때 Redux Thunk를 미들웨어로 등록해야합니다. 이를 위해 applyMiddleware 함수를 사용하여 Redux Thunk를 등록합니다.
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);
export default store;
2. 폼 유효성 검사 로직 작성
Redux Thunk를 활용하여 비동기 작업인 폼 유효성 검사 로직을 작성해보겠습니다.
import axios from 'axios';
// 폼 유효성 검사 액션 타입 정의
const VALIDATION_REQUEST = 'VALIDATION_REQUEST';
const VALIDATION_SUCCESS = 'VALIDATION_SUCCESS';
const VALIDATION_FAILURE = 'VALIDATION_FAILURE';
// 폼 유효성 검사 액션 생성 함수 정의
const validationRequest = () => {
return {
type: VALIDATION_REQUEST
};
};
const validationSuccess = () => {
return {
type: VALIDATION_SUCCESS
};
};
const validationFailure = (error) => {
return {
type: VALIDATION_FAILURE,
error
};
};
// 비동기 폼 유효성 검사를 처리하는 Thunk 액션 생성 함수 정의
export const validateForm = (formData) => {
return (dispatch) => {
dispatch(validationRequest());
// 폼 데이터를 서버로 전송하여 유효성 검사 결과를 받아옴
axios.post('/api/validate', formData)
.then(response => {
// 유효성 검사가 성공한 경우
dispatch(validationSuccess());
})
.catch(error => {
// 유효성 검사가 실패한 경우
dispatch(validationFailure(error));
});
};
};
위의 예시 코드에서는 validateForm이라는 Thunk 액션 생성 함수를 정의하였습니다. 이 함수는 폼 데이터를 서버로 전송하여 유효성 검사 결과를 받아오는 비동기 작업을 수행합니다.
전송한 결과에 따라 validationSuccess 또는 validationFailure 액션을 디스패치하여 Redux Store를 업데이트합니다.
3. 로직을 컴포넌트에서 사용하기
위에서 작성한 폼 유효성 검사 로직을 컴포넌트에서 사용하는 방법은 다음과 같습니다.
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { validateForm } from './actions';
function FormComponent() {
const [formData, setFormData] = useState({ email: '', password: '' });
const dispatch = useDispatch();
const handleSubmit = (e) => {
e.preventDefault();
dispatch(validateForm(formData));
};
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
return (
<form onSubmit={handleSubmit}>
<input type="text" name="email" value={formData.email} onChange={handleChange} />
<input type="password" name="password" value={formData.password} onChange={handleChange} />
<button type="submit">Submit</button>
</form>
);
}
export default FormComponent;
위의 예시 코드에서는 FormComponent라는 React 컴포넌트에서 Redux Store의 상태를 업데이트하기 위해 useDispatch 훅을 사용하여 dispatch 함수를 가져왔습니다. 폼 데이터가 변경될 때마다 handleChange 함수가 호출되어 폼 데이터가 업데이트됩니다. handleSubmit 함수는 Submit 버튼 클릭 시 validateForm Thunk 액션을 디스패치하여 폼 데이터를 서버로 전송합니다.
이처럼 Redux Thunk를 활용하여 폼 유효성 검사 로직을 구현할 수 있습니다.