ant.design

🧐 Ant.design (antd)

• UI를 위한 라이브러리이다.
• React, Angular, Vue 등을 위한 컴포넌트 라이브러리 버전도 존재한다.
• 최신 브라우저 및 Internet Explorer 11를 지원한다.

---

🐳 React + Typescript + Antd

React + Typescript 환경에서 개발

📌 타입스크립트는 antd에 내장되어 있으므로 (타입스크립트를) 따로 설치하지 않는다 ➡️ @types/antd

설치

$ npm install antd
$ yarn add antd

사용

// src/App.tsx
import React, { FC } from 'react';
import { Button } from 'antd';  // Button 컴포넌트 import
import './App.css';

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button> // 컴포넌트 활용
  </div>
);

export default App;

❗️ src/App.css 에 아래 추가하기
@import '~antd/dist/antd.css';
또는 styledComponent 로 작업 가능하다

🔨 styledComponent 적용 예시

import * as React from 'react';
import { styled } from 'styledComponents';

// styledComponents 적용(Component 생성)
const Component = styled.div`
  width: 100%;
  font-size: 0.8em;
  color: ${p => p.theme.normal_color};

  [data-container] {
    height: 60px;
    justify-content: center;
  }
`;

// IProps 인터페이스 생성(타입 지정 - string)
interface IProps {
  className?: string;
}

class Footer extends React.Component<IProps> {
  render() {
    return (
      <Component> // styledComponent로 스타일링 한 태그
        <div data-container>
          Co-working space, Floor 3rd, Hanoi
          8:00 - 11:00 Sunday, Oct 14th, 2018
        </div>
      </Component>
    );
  }
}

antd로 다양한 UI Component를 활용할 수 있지만, 대표적으로 사용되는 table을 활용하는 예시를 설명해보자.

📌 coloum과 data를 json형태로 지정 후, antd 컴포넌트에 속성으로 넣어주는 방식이다.

import { Table } from 'antd'; // table 불러오기

  // columns 지정 (총 3개의 columns이 생긴다)
const columns = [
  {
    title: 'Name',     // title: 제목라인
    dataIndex: 'name', // dataIndex: 실제 값
    key: 'name',       // dataIndex와 일치해야 하며, dataIndex가 있으면 굳이 필요없음
    width: 150,
    render: text => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: 80,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address 1',
    ellipsis: true,
  },
];

  // data 지정 (columns의 dataIndex와 일치해야 한다)
const data = [
  {
    key: '1',
    name: 'John Brown',  
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
  },
];

ReactDOM.render(
  <Table columns={columns} dataSource={data} />
);

---

🌈 antd API

공식 문서 참고

antd API를 활용해서 다양한 커스터마이징이 가능하다.
Table 및 Column 의 대표적인 API와 이를 활용한 예시를 들어보자!

// MARK: 컬럼 셋팅.
const TableColumns:Array<String> = [
    {
      title: 'EMAIL',   // 제목 행에 들어가는 이름
      key: 'email',
      dataIndex: 'email',  // 실제 data
      width: '30px',
      align: 'center',
    },
    {
      title: 'NAME',
      key: 'name', 
      dataIndex: 'name',
      align: 'center',
      width: '60px',
      fixed: true,
    },
    {
      title: t('page.host_list.table.header.created'),
      key: 'createdAt',
      dataIndex: 'createdAt',   // 현재 날짜정보를 표기하는 속성 
      width: '140px',
      align: 'center',
      // 특정 키:값을 return하도록 "render 속성"을 적용한다.
      render: (value) => dateFormat(new Date(value), 'simple', language),
    },
    {
      title: 'OPTION',
      key: 'option',
      width: '80px',
      align: 'center',
      // 특정 태그를 return하도록 "render 속성"을 적용한다.
      render: (_, record) => {        
        return (
          <>
            <Popconfirm 
              title="비밀번호를 리셋하시겠습니까?" 
              onConfirm={() => {
                passwordReset(record)
              }
            }>
              <ResetBtn>리셋</ResetBtn>
            </Popconfirm>
        )
      },
    }]  

⭐️ render 속성은 2개의 인자를 받는다. (value, record)
value 인자를 받을 필요가 없으면 임의로 '_'를 넣어줄 수 있다. ('_', render)
record 인자를 받을 필요가 없으면 그냥 첫번째 인자인 value만 표기해도 됨.

첫 번째 인자인 value에서는 객체 안의 특정 키:값을 받는다.
예) 위 예시에서
[
{title:-- , key:--, dataIndex:-- },
{title:-- , key:--, dataIndex:--},
{title:-- , key:--, dataIndex:--}
]
로 구성되어 있다.
value인자는 해당 객체 안의 title 또는 key 또는 dataIndex 의 특정 키:값을 의미할 수 있다.

따라서 위의 value 키:값은 dataIndex: createdAt을 의미하며, 해당 value정보로 render에 변형값을 출력한다.

두 번째 인자인 record에서는 배열 안의 특정 객체({--})를 받는다.
예) 위 예시에서 render인자는 해당 객체 안의 {--} 묶음이 될 수 있다. {title:-- , key:--, dataIndex:-- }

따라서 위의 record 값은 해당 객체 안의 모든 키:값을 적용하므로, return 으로 출력되는 내용에 모든 키:값을 포함한다.