Redux Thunk를 이용한 동적으로 생성되는 폼 구현하기

18 Oct 2023

redux

소개

이번 글에서는 Redux Thunk를 활용하여 동적으로 생성되는 폼을 구현하는 방법을 알아보겠습니다. Redux Thunk는 Redux 미들웨어 중 하나로 비동기 작업을 처리하기 위해 사용됩니다.

폼 생성하기

먼저, 폼을 동적으로 생성하기 위해 Redux의 상태와 액션을 활용합니다. 상태는 폼 필드의 정보를 담을 배열로 정의하고, 액션은 새로운 폼 필드를 추가하거나 제거하는 작업을 담당합니다.

상태 정의하기

const initialState = {
  formFields: [],
};

function formReducer(state = initialState, action) {
  switch(action.type) {
    case 'ADD_FIELD':
      return {
        ...state,
        formFields: [...state.formFields, action.payload],
      };
    case 'REMOVE_FIELD':
      return {
        ...state,
        formFields: state.formFields.filter(field => field.id !== action.payload),
      };
    default:
      return state;
  }
}

액션 정의하기

function addFormField(field) {
  return {
    type: 'ADD_FIELD',
    payload: field,
  };
}

function removeFormField(fieldId) {
  return {
    type: 'REMOVE_FIELD',
    payload: fieldId,
  };
}

Redux Thunk 사용하기

Redux Thunk를 사용하려면 Redux 미들웨어를 설정해야 합니다. 또한, 비동기 작업을 처리할 액션 생성자 함수를 Redux Thunk 함수로 감싸야 합니다.

미들웨어 설정하기

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

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

비동기 액션 생성자 함수 정의하기

function addFormFieldAsync(field) {
  return dispatch => {
    // 비동기 작업 수행
    // ...

    // 액션 디스패치
    dispatch(addFormField(field));
  };
}

function removeFormFieldAsync(fieldId) {
  return dispatch => {
    // 비동기 작업 수행
    // ...

    // 액션 디스패치
    dispatch(removeFormField(fieldId));
  };
}

폼 컴포넌트 구현하기

Redux Thunk로 비동기 작업을 처리하는 액션 생성자 함수를 컴포넌트에서 호출하여 폼을 동적으로 생성할 수 있습니다.

import React from 'react';
import { connect } from 'react-redux';
import { addFormFieldAsync, removeFormFieldAsync } from './actions';

class Form extends React.Component {
  handleAddField = () => {
    const newField = // 새로운 폼 필드 생성 로직
    this.props.addField(newField);
  }

  handleRemoveField = (fieldId) => {
    this.props.removeField(fieldId);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleAddField}>Add Field</button>
        {this.props.formFields.map(field => (
          <div key={field.id}>
            {/* 폼 필드 렌더링 로직 */}
            <button onClick={() => this.handleRemoveField(field.id)}>Remove</button>
          </div>
        ))}
      </div>
    );
  }
}

const mapStateToProps = state => ({
  formFields: state.formFields,
});

const mapDispatchToProps = {
  addField: addFormFieldAsync,
  removeField: removeFormFieldAsync,
};

export default connect(mapStateToProps, mapDispatchToProps)(Form);

결론

이처럼 Redux Thunk를 이용하여 동적으로 생성되는 폼을 구현할 수 있습니다. Redux Thunk를 사용하면 비동기 작업을 처리하면서 상태를 변경할 수 있어 효율적인 폼 구현이 가능해집니다.

소개