Antd5에서 수평과 수직 폼 스타일을 혼합하는 방법

문제 상황

사용자는 Ant Design(Antd) 버전 5에서 수평과 수직 폼 스타일을 혼합하려고 시도하고 있습니다. 하지만 이 과정에서 어려움을 겪고 있으며, 특별히 Form.Item의 label과 wrapperCol 속성을 어떻게 관리해야 하는지 모르겠습니다.

해결 방안

Antd에서는 폼 스타일을 수직과 수평으로 설정할 수 있습니다. Form 컴포넌트의 layout 속성을 사용하여 이를 설정할 수 있습니다. layout 속성은 “horizontal”, “vertical”, “inline” 세 가지 값을 가질 수 있습니다.

수직과 수평을 혼합하는 기본 원칙

1. 전체 폼 레이아웃 설정: 전체 폼의 layout 속성을 먼저 설정합니다. 예를 들어, layout="horizontal"로 설정하면 전체 폼 항목은 수평 레이아웃을 따릅니다.

2. 개별 폼 아이템 레이아웃 설정: 개별 Form.Item에 wrapperCol과 labelCol 속성을 직접 설정하여 수직 레이아웃을 적용할 수 있습니다. 이 속성들은 컬럼 그리드 시스템을 따릅니다.

예를 들어, 전체 폼이 수평 레이아웃이지만 하나의 폼 아이템만 수직 레이아웃을 원한다면, 다음과 같이 설정할 수 있습니다.

<Form layout="horizontal">
  <Form.Item label="Name">
    <Input />
  </Form.Item>
  <Form.Item labelCol= wrapperCol= label="Description">
    <Input.TextArea />
  </Form.Item>
</Form>

주의사항

• wrapperCol과 labelCol은 Antd의 그리드 시스템을 기반으로 하기 때문에 span 값은 24를 넘을 수 없습니다.
• 개별 Form.Item에 설정한 wrapperCol과 labelCol은 그 폼 아이템에만 적용됩니다.

이 방법을 사용하면 Antd 5에서 수평과 수직 폼 스타일을 효과적으로 혼합할 수 있습니다.