Ant Design of React

Ant Design 스펙을 따라 개발한 React UI 라이브러리 antd예요. 풍부하고 상호작용적인 사용자 인터페이스를 만들기 위한 고품질 컴포넌트와 데모를 함께 제공해요.

출처: 문서

본문

✨ 특징 (Features)

🌈 웹 애플리케이션을 위한 엔터프라이즈급 UI.
📦 바로 꺼내 쓸 수 있는 고품질 React 컴포넌트 세트.
🛡 예측 가능한 정적 타입을 가진 TypeScript로 작성.
⚙️ 디자인 리소스와 개발 도구의 완전한 패키지.
🌍 수십 개 언어에 대한 국제화 지원.
🎨 모든 디테일에서 강력한 테마 커스터마이징.

환경 지원 (Environment Support)

모던 브라우저
Server-side Rendering(SSR)
Electron

Edge · Firefox · Chrome · Safari · Opera · Electron 브라우저를 최신 2개 버전까지 지원해요.

antd 2.0 이후 IE8 지원이 중단되었고, antd 4.0 이후 React 15와 IE9/10 지원이, antd 5.0 이후 IE 전체 지원이 중단되었어요. 그리고 antd 6.0 이후에는 React 16/17 지원이 중단되었어요.

버전 (Version)

Stable:

새 버전 알림은 이 피드를 구독하면 돼요: https://github.com/ant-design/ant-design/releases.atom

설치 (Installation)

npm 또는 yarn 또는 pnpm 또는 bun 사용

npm 또는 yarn 또는 pnpm 또는 bun 설치를 권장해요. 개발을 더 쉽게 만들어 주고, JavaScript 패키지와 도구의 풍부한 생태계를 활용하게 해 주기 때문이에요.

$ npm install antd --save

$ yarn add antd

$ pnpm install antd --save

$ bun add antd

네트워크 환경이 좋지 않다면 cnpm 같은 다른 레지스트리와 도구를 시도해 볼 수 있어요.

브라우저에서 import

브라우저에 script와 link 태그를 추가하고 전역 변수 antd를 사용해요.

antd npm 패키지의 dist 폴더에 antd.js, antd.min.js, reset.css를 제공해요. 이 파일들은 , 또는 unpkg에서 직접 다운로드할 수도 있어요.

전체 파일을 로드하는 것은 강력히 권장하지 않아요. 앱을 부풀리고 버그 수정·업데이트 수신을 어렵게 만들기 때문이에요. antd는 webpack 같은 빌드 도구와 함께 사용해, 자신이 쓰는 부분만 import 하는 방식으로 쓰는 걸 의도하고 있어요.

참고: antd.js를 사용하기 전에 react, react-dom, dayjs를 먼저 import 해야 해요.

사용법 (Usage)

import React from 'react';
import { DatePicker } from 'antd';

const App = () => {
  return <DatePicker />;
};

export default App;

모듈화된 antd 사용

antd는 기본적으로 ES modules tree shaking을 지원해요.

TypeScript

antd는 내장 ts 정의를 제공하므로 @types/antd를 설치하지 마세요.

링크 (Links)

React가 아닌 구현 (Non-React Implementations)

우리 디자인 언어를 담은 컴포넌트 라이브러리는 React로 구현해요. 커뮤니티가 우리 디자인 시스템을 다른 프런트엔드 프레임워크로 구현하는 것도 언제나 환영해요.

antd를 사용하는 회사들 (Companies using antd)

Ant Design은 국내외에서 엔터프라이즈급 웹사이트 구축에 널리 사용돼요. 참고 데이터는 wappalyzer를 확인하면 돼요. 회사나 제품이 Ant Design을 사용한다면 여기에서 알려 주세요!

기여하기 (Contributing)

먼저 CONTRIBUTING.md를 읽어 주세요.

antd 개선에 도움을 주고 싶다면 Pull Request를 만들어 주세요. 버그와 이슈는 여기에서 자유롭게 보고해 주세요.

이슈 작성이 처음이라면, 작성 전에 How To Ask Questions The Smart Way와 How to Ask a Question in Open Source Community, How to Report Bugs Effectively를 읽어 보는 걸 권해요. 잘 작성된 버그 리포트는 우리가 여러분을 도와주는 데 큰 힘이 되거든요!

도움이 필요하세요? (Need Help?)

antd 사용법에 대한 질문은 GitHub Discussions에 Q&A 태그를 달아 올려 주세요. 또는 Stack Overflow에 antd 태그로 질문해 주세요.

늘 그렇듯, 경험이 많은 사용자분들이 antd에 익숙하지 않은 분들을 도와주시길 바라요!

Ant Design of React