Ant Design Form의 initialValue 사용 방법

소개

Ant Design 폼을 사용할 때, initialValue 속성을 사용하여 폼 필드의 초기값을 설정할 수 있습니다. 초기값은 폼 필드에 데이터를 미리 채우거나, 폼이 값이 없을 때 기본값을 보여주는 데 사용할 수 있습니다.

Ant Design Form에서 initialValue 사용하기

initialValue 속성은 Ant Design의 Form 컴포넌트에서 제공하는 getFieldDecorator 메서드와 함께 사용할 수 있습니다. 이를 사용하여 특정 폼 필드의 초기값을 설정할 수 있습니다.

const Component = ({ id }) => {
  const { data } = useQuery(GET_NAME, {
    variables: { id },
    onCompleted: res => { form.setFieldsValue({ name: res.data.name }) }
  })

  return (
    <Form.Item>
      {form.getFieldDecorator('name', { initialValue: 'John' })(<Input />)}
    </Form.Item>
  )
}

위 예제에서는 ‘name’ 필드의 initialValue를 ‘John’으로 설정했습니다. 이렇게 하면 폼이 렌더링될 때 폼 필드에 ‘John’이라는 값이 미리 채워집니다.

또한 가져온 데이터에 기반하여 initialValue를 동적으로 설정할 수도 있습니다. 예를 들어:

const Component = ({ id }) => {
  let initialName = 'John'
  const { data } = useQuery(GET_NAME, { variables: { id } })
  if (data) { 
    initialName = data.name 
  }

  return (
    <Form.Item>
      {form.getFieldDecorator('name', { initialValue: initialName })(<Input />)}
    </Form.Item>
  )
}

이 경우에는 initialValue를 서버에서 가져온 ‘name’ 필드 값으로 설정합니다. 데이터가 사용 가능한 경우, initialName은 가져온 값으로 설정됩니다.

Ant Design Form에서 initialValues 설정하기

개별 폼 필드의 initialValue를 설정하는 것 외에도, Form 컴포넌트를 사용하여 전체 폼에 대한 initialValues를 설정할 수도 있습니다. initialValues 속성은 각 폼 필드의 초기값을 담은 객체를 받습니다.

<Form
  initialValues={{ username: '기본 값' }}
  onFinish={onFinish}
  onFinishFailed={onFinishFailed}>
  <Form.Item
    label="사용자 이름"
    name="username"
    rules={[{ required: true, message: '사용자 이름을 입력해주세요!' }]}>
      <Input />
  </Form.Item>
</Form>

위 예제에서는 ‘username’이라는 폼 필드의 initialValues를 ‘기본 값’으로 설정하는 방법을 보여줍니다. 이렇게 하면 각 필드에 대해 개별적인 initialValue를 지정하지 않고도 여러 폼 필드에 기본값을 설정하는 데 유용합니다.

결론

Ant Design 폼에서의 initialValue와 initialValues 속성은 폼 필드의 초기값을 설정하는 간편한 방법을 제공합니다. 기본값으로 폼 필드를 미리 채우거나 가져온 데이터를 렌더링하는 등의 시나리오에 이러한 속성을 사용하여 쉽게 구현할 수 있습니다. Ant Design 폼에서 이러한 기능을 사용하여 사용자 경험을 향상시키고 폼 입력을 간소화하세요.

참고 자료 : 

reactjs