Ant Design

Ant Design

 

Ant Design은 중국의 알리바바 그룹에서 만든 React UI 라이브러리로, 기업용(enterprise-grade) UI 설계에 초점을 맞췄다.
디자인이 깔끔하고 일관성 있으며, 수많은 고급 컴포넌트를 제공해서 생산성을 엄청 높여준다.

Ant Design이란?

• 풍부한 UI 컴포넌트: 버튼, 모달, 테이블, 폼 등 거의 모든 걸 제공.
• 디자인 시스템 기반: 깔끔하고 일관된 UX를 제공.
• i18n 지원: 다국어, RTL 등의 기능도 기본 탑재.
• TypeScript 지원: TS로도 완벽하게 쓸 수 있음.
• 커스터마이징 가능: 테마 변경도 쉬움.

설치 방법

npm install antd

CSS를 전역에 포함해야 하므로 보통 index.js나 App.js에 다음을 추가합니다:

import 'antd/dist/reset.css'; // Ant Design v5 기준 (v4는 'antd/dist/antd.css')

간단 사용 예시

// App.js
import React from 'react';
import { Button, DatePicker, message } from 'antd';

function App() {
  const handleClick = () => {
    message.success('버튼을 클릭했어요!');
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h2>Ant Design 예제</h2>
      <Button type="primary" onClick={handleClick}>
        클릭하세요
      </Button>
      <br /><br />
      <DatePicker />
    </div>
  );
}

export default App;

자주 쓰는 컴포넌트

컴포넌트	설명
Button	버튼
Input	입력 필드
Form	폼 관리
Table	표 (데이터 그리드)
Modal	모달 팝업
Select	드롭다운
Tabs	탭 UI
Layout	페이지 레이아웃 구조

공식 문서

Ant Design 문서: https://ant.design