UI 라이브러리 - Ant Design (4. 주요 UI)

<Input />, <Password />, <Button />

입력, 버튼 등의 UI component를 제공한다.

<Form />

데이터 범위 관리 기능이 있는 component이다. 데이터 수집, 검증 및 스타일을 포함한다. 인스턴스를 생성하거나 정보를 수집해야하는 경우, 특정 규칙에서 필드의 유효성을 검사해야하는 경우 사용한다.

다음과 같은 세부 컴포넌트를 가지고 있다.

• Item : 데이터 양방향 바인딩, 유효성 검사, 레이아웃 등에 대한 양식 필드 구성 요소이다.
• List : 필드에 대한 어레이 관리를 제공합니다.
• ErrorList : rules오류 메시지를 표시하고 Form.List에서만 작동해야한다.

const { Item } = Form;
const { Password } = Input;

<Form 
  initialValues={{ remember: true }}
  onFinish={onFinish}
  autoComplete="off"
 >
  <Item label='UserName' name='username'         
    rules={[{
      required: true,
      message: 'please input your name',
    }]}>
    <Input /> 
  </Item>
  <Item label='UserPW' name='userpw'         
    rules={[{
      required: true,
      message: 'please input your pw',
    }]}>
    <Password /> 
  </Item>
  <Item name='remember' valuePropName='checked' />  
    <Checkbox>
      Remember me
    </Checkbox>
  </Item>
  <Item wrapperCol={{ offset: 8, span: 16 }}> 
    <Button type='primary' htmlType='submit'>
      Submit
    </Button>
  </Item>
</Form>

<Table />

데이터의 행이 표시된다. 구조화된 데이터 모음을 표현할 때 사용되고, 데이터를 정렬 / 검색 / 페이지 메기기 / 필터링 기능이 담겨있다. columns 속성으로 테이블의 항목을, dataSource로 테이블의 데이터를 지정한다. key 속성으로 데이터의 key를, dataIndex 속성으로 표시될 데이터의 항목을, redner 속성으로 커스텀하게 render되도록 함수를 지정할 수 있다. 당연히, table에 나타낼 데이터 배열이 필요하다.

<Table dataSource={dataList}>
  <ColumnGroup title="Name">
    <Column 
      title="First Name" 
      dataIndex='firstName' 
      key="firstName" />
    <Column 
      title="Last Name" 
      dataIndex="lastName" 
      key="lastName" />
  </ColumnGroup>

  <Column 
    title='Age' 
    dataIndex='age'
    key='age'
    />
  <Column 
    title='Address' 
    dataIndex='address' 
    key='address' 
    />
  <Column 
    title='Tags' 
    dataIndex='tags' 
    key='tags' 
    render={(tags: Array<string>) => {
      return tags.map((tag, i) => (
        <Tag color={tag === 'super' ? 'gold-inverse' : tag === 'loser' ? 'red-inverse' : 'purple'} key={tag}>
          {tag.toUpperCase()}
        </Tag>
      ))
    }} />
  <Column title='Action' key='action' render={(_: any, record: DataType) => (
      <Space>
        <a>Invite {record.lastName}</a>
        <Button type='dashed'>Delete</Button>
      </Space>
    )} />           
</Table>

<Modal />

모달을 표시한다. 모달 오픈시 새로운 div가 <div id='root'></div> 와 동일선상에 생성된다. 이는 Portal과 유사하다. 또한ok와 cancel을 눌렀을 때 callback 함수호출 기능이 있다. modal의 오픈 상태를 제어할 boolean state가 필요하기에 useState() hook을 이용한다.

<>
  <Button type="primary" onClick={showModal}>
    Open Modal
  </Button>
  <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </Modal>
</>

<Pagination />

게시판 컴포넌트에서, 페이지를 탐색하여 데이터를 검색하려는 경우 사용한다.

<Pagination defaultCurrent={1} total={50} />