본문 바로가기
Front-end/ReactJS

[ReactJS] Ant Design에 대한 이야기

조미남 2018. 4. 13. 10:39

Ant Design에 대하여

만든 곳: https://ant.design/

간략한 소개: A UI Design Language

  • 리액트와 타입스크립트(Typescript) 기반으로 제작된 UI라이브러리.
  • 중국회사에서 오픈소스화한 라이브러리
  • MIT License


설치

React에서 Ant Design 사용하기

주요 기능

  1. Layout Component

      Grid

      • 각종 컴포넌트와 HTML 요소들을 쉽게 배치할 수 있도록 Grid 영역을 제공합니다.

      • 이전에 사용했던 Bootstrap 의 경우 12개의 요소로 구분하여 세분화된 화면 구성을 하기 힘들었으나, Ant Design의 경우 24까지 요소로 구분되어 좋은 것 같습니다.


  2. Data 입/출력을 위한 다양한 Component를 제공

    • Ant Design에서 제공하는 이미 만들어진 Components입니다. React의 특성을 활용하여 이미 Component로 만들어져 있습니다.

      • 주요기능으로서 input Component에서의 "자동완성 기능 <AutoComplete />", "날짜 선택 <DatePicker />", 숫자만 입력할 수 있는 "input 컴포넌트<InputNumber />", 파일을 업로드할 수 있도록 구성된 "파일 컴포넌트 <Upload />" 가 있습니다.

      • 다양한 컴포넌트 목록 확인은 여기에서 확인할 수 있습니다. ( https://ant.design/components/auto-complete/ )

    • insert

    3. 컴포넌트의 사용방법

    • React를 위한 Ant Design (Design Components)은 Bootstrap과 같은 일반적인 CSS 프레임워크와 다르게 각 컴포넌트별 사용법이 존재합니다.

    • 예를 들어 Table 컴포넌트를 사용하고자 할 경우 테이블에 표시될 데이터는 컴포넌트에서 제공하는 규칙에 맞게 지정해야 합니다.

    • Ant Design Table Component sample Collapse source
       
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      const dataSource = [{
        key: '1',
        name: 'Mike',
        age: 32,
        address: '10 Downing Street'
      }, {
        key: '2',
        name: 'John',
        age: 42,
        address: '10 Downing Street'
      }];
       
      const columns = [{
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
      }, {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
      }, {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
      }];
       
      <Table dataSource={dataSource} columns={columns} />

    • 위의 예제에서 보는 것처럼 Table 컴포넌트에는 dataSource, columns 프로퍼티를 설정해야 합니다. 이외 다양한 프로퍼티를 제공하고 있으며 각 컴포넌트별 제공되는 프로퍼티는 https://ant.design/components/table/ 에서 확인할 수 있습니다.

  3. 국제화 지원

    • Ant Design 은 국제화지원을 기본하고 있으나, 아직 한국어는 공식 제공하고 있지 않습니다.
    • 다만, localeProvider를 제공하고 있어 해당 기능을 설정 후 몇몇 국가의 언어를 사용할 수 있습니다. ( https://github.com/ant-design/ant-design/blob/master/components/locale-provider/ )
      • 보다 많은 언어의 지원을 위해 react-intl 라이브러리를 추가하거나 사용할 수 있습니다.


저작자표시 비영리 변경금지

'Front-end > ReactJS' 카테고리의 다른 글

[ReactJS] Ant Design Custom Theme 사용하기  (0) 2018.04.13
[ReactJS] React JSX, VirtualDOM, Component, Prop, State  (0) 2018.04.13
[ReactJS] create-react-app 설치와 샘플 실행  (0) 2018.04.13

'Front-end/ReactJS' Related Articles

티스토리툴바