Redux Form에서 Input 컴포넌트에 defaultValue를 설정하는 방법 – 문제 해결 가이드

제목: Redux Form에서 Input 컴포넌트에 defaultValue 설정하는 방법

소개

Redux Form에서 Input 컴포넌트에 defaultValue를 설정하면 때로는 비어있는 필드가 생성될 수 있습니다. 특히 동적인 폼이나 FieldArray 기능을 사용하는 경우에는 어려움이 될 수 있습니다. 이 글에서는 defaultValue를 올바르게 설정하고 필드를 예상한대로 채우는 다양한 방법을 살펴보겠습니다.

방법 1: initialize() 사용

여러 번 업데이트할 수 있는 기본값을 설정해야 하는 경우, Redux Form에서 제공하는 initialize() 메서드를 사용할 수 있습니다. initialize()에 값 객체를 전달하여 원하는 기본값으로 폼 필드를 초기화할 수 있습니다. 다음은 예제입니다:

class MyForm extends Component {
  componentWillMount () {
    this.props.initialize({ name: 'your name' });
  }

  // 데이터가 업데이트될 수 있을 때
  componentWillReceiveProps (nextProps) {
    if (/* nextProps가 기본값을 리셋할 정도로 변경됐을 때 */) {
      this.props.destroy();
      this.props.initialize({ ... });
    }
  }

  render () {
    return (
      <form>
        <Field name="name" component="..." />
      </form>
    );
  }
}

export default reduxForm({})(MyForm);

이 방법을 사용하면 기본값을 반복적으로 업데이트할 수 있습니다. 기본값을 한 번만 설정해야 하는 경우 다음 구문을 사용할 수 있습니다:

export default reduxForm({ values: { ... } })(MyForm);

방법 2: initialValues 사용

기본값을 설정하는 또 다른 방법은 Redux Form의 initialValues 구성을 사용하는 것입니다. initialValues 객체에 원하는 기본값을 제공하면 폼 필드가 해당 값으로 초기화됩니다. 다음은 예제입니다:

const renderMembers = ({ fields }) => (
  <div>
    <h2>Members</h2>
    <button onClick={() => fields.push({})}>
      추가
    </button>
    <br />
    {fields.map((field, idx) => (
      <div className="member" key={idx}>
        성
        <Field name={`${field}.firstName`} component="input" type="text" />
        <br />
        이름
        <Field name={`${field}.lastName`} component="input" type="text" />
        <br />
        <button onClick={() => fields.remove(idx)}>
          삭제
        </button>
        <br />
      </div>
    ))}
  </div>
);

const Form = () => (
  <FieldArray name="members" component={renderMembers} />
);

const MyForm = reduxForm({
  form: "foo",
  initialValues: {
    members: [{
      firstName: "내이름"
    }]
  }
})(Form);

방법 3: 고차 컴포넌트(Higher Order Component, HoC) 사용

또 다른 방법은 defaultValue의 초기화를 처리하기 위해 고차 컴포넌트(HoC)를 생성하는 것입니다. 이 방법은 기본값을 설정하는 방법에 대해 더 많은 제어권을 제공합니다. 다음은 예제 구현입니다:

import { Component } from 'react'
import { change } from 'redux-form'

class ReduxFormInputContainer extends Component {
  componentDidMount() {
    const {
      initialValue,
      meta,
    } = this.props
    if (initialValue === undefined || meta.initial !== undefined || meta.dirty) return
    const {
      meta: { form, dispatch },
      input: { name },
    } = this.props
    dispatch(change(form, name, initialValue))
  }
  render() {
    const {
      initialValue,
      component: Compo,
      ...fieldProps
    } = this.props
    return <Compo {...fieldProps} />
  }
}

function reduxFormInputContainer(component) {
  return function (props) {
    return <ReduxFormInputContainer {...props} component={component} />
  }
}

export default reduxFormInputContainer

이 HoC를 사용하기 위해 입력 컴포넌트를 이로 감싸면 됩니다. 다음은 예제입니다:

import reduxFormInputContainer from 'app/lib/reduxFormInputContainer'

InputNumericWidget = reduxFormInputContainer(InputNumericWidget)

class InputNumeric extends Component {
  render() {
    const props = this.props
    return (
      <Field component={InputNumericWidget} {...props} />
    )
  }
}

결론

Redux Form에서 입력 컴포넌트에 defaultValue를 설정하는 방법은 다양한 기술을 사용하여 달성할 수 있습니다. initialize(), initialValues 또는 고차 컴포넌트 중에서 적합한 것을 선택하여 기본값이 올바르게 할당되어 비어있는 필드를 피하도록 해야 합니다. 이러한 방법을 실험하고 특정 사용 사례에 가장 적합한 방법을 선택하세요.

참고 자료 :

https://stackoverflow.com/questions/43631435/redux-form-defaultvalue

같은 카테고리의 다른 글 보기 :

reactjs