[javascript] Redux의 폼(Form) 관리 방법은?

22 Nov 2023

javascript

Redux는 상태 관리 라이브러리로, 폼(Form) 데이터의 관리에도 유용하게 사용될 수 있습니다. 폼 입력 값을 관리하기 위해 Redux를 사용하는 것은 간단하고 효과적인 방법입니다. 이제 Redux를 사용하여 폼 데이터를 관리하는 방법을 알아보겠습니다.

폼 데이터 상태 정의하기 먼저, Redux 상태 트리 내에 폼 데이터를 저장할 상태를 정의해야 합니다. 폼 데이터는 주로 객체 형태로 저장됩니다. 이 객체는 폼에 있는 각 입력 필드의 값을 저장합니다.

Redux 상태 트리에 폼 데이터를 저장하는 예시 코드는 아래와 같습니다:

const initialState = {
  form: {
    name: '',
    email: '',
    password: ''
  }
}

위 코드에서 form 객체의 속성으로 각 입력 필드의 초기값을 설정해 줍니다.

액션 생성자(Action Creator) 정의하기 폼 데이터를 변경하는 액션을 생성하기 위해 액션 생성자를 정의해야 합니다. 액션 생성자는 폼 데이터의 변경사항을 나타내는 액션을 생성하고 반환합니다.

아래는 폼 데이터 변경을 위한 액션 생성자의 예시입니다:

const updateFormValue = (field, value) => {
  return {
    type: 'UPDATE_FORM_VALUE',
    payload: {
      field,
      value
    }
  }
}

위 코드에서 field는 변경할 폼 필드의 이름을, value는 새로운 값입니다. UPDATE_FORM_VALUE 타입의 액션을 생성하고, 필드와 값을 payload 객체에 담아 반환합니다.

리듀서 정의하기 폼 데이터의 변경을 처리하기 위해 리듀서를 작성해야 합니다. 리듀서는 현재 상태와 액션을 받아서 새로운 상태를 반환하는 함수입니다.

폼 데이터를 관리하는 리듀서의 예시 코드는 다음과 같습니다:

const formReducer = (state = initialState.form, action) => {
  if (action.type === 'UPDATE_FORM_VALUE') {
    return {
      ...state,
      [action.payload.field]: action.payload.value
    }
  }

  return state
}

위 코드에서 UPDATE_FORM_VALUE 액션 타입에 대해 폼 데이터를 업데이트하는 로직이 작성되어 있습니다. 해당 액션이 발생하면 이전 폼 데이터 상태를 복제하고, payload 객체에 담긴 필드와 값을 사용하여 업데이트합니다.

컴포넌트와 Redux 연결하기 마지막으로, React 컴포넌트와 Redux를 연결하여 폼 데이터를 사용할 수 있도록 해야 합니다. 이를 위해 connect 함수와 액션 생성자를 활용합니다.

예를 들어, 아래는 폼 컴포넌트가 name 필드와 email 필드에 대한 입력 값을 Redux 상태로부터 가져와 사용하는 예시입니다:

import { connect } from 'react-redux'

const FormComponent = ({ name, email, updateFormValue }) => {
  return (
    <div>
      <input type="text" value={name} onChange={(e) => updateFormValue('name', e.target.value)} />
      <input type="email" value={email} onChange={(e) => updateFormValue('email', e.target.value)} />
    </div>
  )
}

const mapStateToProps = (state) => ({
  name: state.form.name,
  email: state.form.email
})

const mapDispatchToProps = {
  updateFormValue
}

export default connect(mapStateToProps, mapDispatchToProps)(FormComponent)

위 코드에서 connect 함수를 사용하여 컴포넌트를 Redux 상태에 연결합니다. mapStateToProps 함수를 통해 Redux 상태의 폼 데이터를 가져와 컴포넌트의 props로 매핑합니다. 마찬가지로, mapDispatchToProps 객체를 통해 액션 생성자를 컴포넌트의 props로 매핑합니다. 이렇게하면 컴포넌트에서 Redux 상태의 폼 데이터를 읽을 수 있으며, 필드 값을 변경할 때 액션을 디스패치할 수 있습니다.

이제 Redux를 사용하여 폼 데이터를 관리하는 방법에 대해 알게되었습니다. 이를 통해 더욱 확장 가능하고 유지 보수하기 쉬운 폼 관리 기능을 구현할 수 있습니다.

더 자세한 정보는 Redux 공식 문서를 참조하시기 바랍니다: Redux 공식 문서