logoAnt Design

⌘ K
  • 디자인
  • 개발
  • 컴포넌트
  • 블로그
  • 자료
5.21.3
  • React의 Ant Design
  • Ant Design of React
  • Ant Design of React
  • Changelog
    v5.21.3
  • 기본 사용법
    • 시작하기
    • Next.js에서 사용하기
      Updated
  • 如何使用
    • 在 create-react-app 中使用
    • 在 Vite 中使用
    • 在 Next.js 中使用
      Updated
    • 在 Umi 中使用
    • 在 Rsbuild 中使用
      New
    • 在 Farm 中使用
      New
    • 使用 Refine
      New
  • 迁移
    • 从 Less 变量到 Design Token
  • Basic Usage
    • Usage with create-react-app
    • Usage with Vite
    • Usage with Next.js
      Updated
    • Usage with Umi
    • Usage with Rsbuild
      New
    • Usage with Farm
      New
    • Usage with Refine
      New
  • 고급기능
    • 테마 커스터마이징
    • CSS 호환성
    • 서버 사이드 렌더링
    • 커스텀 날짜 라이브러리 사용하기
  • 进阶使用
    • 定制主题
    • 使用 CSS 变量
      New
  • Advanced
    • Customize Theme
    • CSS Variables
      New
    • Internationalization
    • Common Props
  • Migration
    • V4 to V5
    • Less variables to Component Token
  • 其他
    • 社区精选组件
    • 贡献指南
    • FAQ
  • Other
    • Third-Party Libraries
    • Contributing
    • FAQ

React의 Ant Design

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference
Work with Us

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

Ant Design 명세에 따라, 우리는 풍부하고 인터렉티브한 사용자 인터페이스를 만들기 위해 고품질 컴포넌트와 데모 세트를 포함한 React UI 라이브러리 antd(🔊 발음)를 개발했습니다.

+

✨ 기능

  • 🌈 웹 애플리케이션을 위해 설계된 엔터프라이즈급 UI.
  • 📦 즉시 사용 가능한 고품질 React 컴포넌트 세트.
  • 🛡 예측가능한 정적 타입을 갖춘 TypeSCript로 개발.
  • ⚙️ 디자인 리소스와 개발 도구 전체 패키지.
  • 🌍 수십 개 언어에 대한 국제화 지원.
  • 🎨 세부 사항까지 강력한 테마 커스터마이징 지원.

환경 지원

  • 최신 브라우저
  • 서버 사이드 렌더링
  • Electron
Edge
Edge		Firefox
Firefox		Chrome
Chrome		Safari
Safari		Opera
Opera		Electron
Electron
Edge최신 2개 버전최신 2개 버전최신 2개 버전최신 2개 버전최신 2개 버전

IE 브라우저를 위해서는 폴리필이 필요합니다. 이를 위해 @babel/preset-env를 사용하는 것을 권장합니다. 만약 umi를 사용하고 있다면, targets 설정을 구성할 수 있습니다.

antd@2.0 이후로 IE8 지원이 중단되었습니다. antd@4.0 이후로 React 15 및 IE9/10 지원이 중단되었습니다. antd@5.0 이후로 IE 지원이 중단되었습니다.

버전

  • 안정화 버전: npm package

새로운 버전 알림을 받으려면 이 피드를 구독하세요: https://github.com/ant-design/ant-design/releases.atom

설치

npm 또는 yarn, pnpm, bun 사용

설치를 위해 npm, yarn, pnpm 또는 bun 사용을 권장합니다, 이것은 개발을 쉽게 해줄 뿐 아니라, Javascript 패키지와 툴의 풍부한 생태계를 활용할 수 있게 해줍니다.

npm iconnpm
yarn iconyarn
pnpm iconpnpm
Bun LogoBun
$ npm install antd --save

네트워크 환경이 좋지 않다면, cnpm과 같은 다른 레지스트리와 도구를 사용해볼 수 있습니다.

브라우저에서의 Import

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

우리는 antd.js, antd.min.js, reset.css를 antd의 npm 패키지의 dist 폴더에 제공합니다. 또한 이 파일들을 CDNJS, 또는 unpkg에서 직접 다운로드할 수도 있습니다.

전체 파일을 로드하는 것은 권장되지 않습니다 이는 애플리케이션을 무겁게 만들고, 버그 수정 및 업데이트를 어렵게 합니다. Antd는 webpack과 같은 빌드 툴과 함께 사용되도록 만들어졌습니다. 이는 사용 중인 antd의 부분만 쉽게 import 하도록 도와줍니다.

참고: antd.js를 사용하기 전에 react、react-dom、dayjs를 import 하세요.

사용법

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


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


export default App;

모듈화된 antd 사용

antd는 기본으로 ES 모듈 트리 셰이킹을 지원합니다.

TypeScript

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

링크

  • 홈페이지
  • China Mirrors
  • 컴포넌트
  • Ant Design 프로
  • Ant Design 프로 컴포넌트
  • Ant Design Charts
  • Change Log
  • rc-components
  • Mobile Components
  • Mini Program Components
  • Ant Design Icons
  • Ant Design Colors
  • 랜딩 페이지
  • Motion
  • Scaffold Market
  • 개발자 지침
  • 버전 릴리즈 노트
  • FAQ
  • 버그 리포트를 위한 CodeSandbox 템플릿
  • Awesome Ant Design
  • 테마 커스터마이즈
  • 콜라보레이터에 지원하는 법

React가 아닌 컴포넌트

React는 antd의 디자인 언어를 구현한 컴포넌트 라이브러리를 캡슐화하는 데 사용됩니다. 우리는 커뮤니티가 그들의 선택으로 다른 프론트엔드 프레임워크에서 우리의 디자인 시스템을 구현하는 것을 환영합니다.

antd를 사용하는 기업

Ant Design은 국내외에서 엔터프라이즈급의 웹사이트를 구축하는데 널리 사용됩니다. 레퍼런스 데이터는 wappalyzer를 참조할 수 있습니다. 귀사나 당신의 제품이 Ant Design을 사용하고 있다면, 여기에서 알려주세요!

기여

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

antd가 개선되도록 돕고 싶다면, Pull Request를 만들어주세요. 버그와 이슈를 편하게 여기에 리포트해주세요.

이슈를 올리는 게 처음이라면, 이슈를 올리기 전에 똑똑하게 질문하는 법, 오픈 소스 커뮤니티에서 질문하는 법과 효과적으로 버그 리포트하는 법를 먼저 읽어주길 바랍니다. 잘 작성된 버그 리포트는 우리가 당신을 도울 수 있게 해줍니다!

도움이 필요하신가요?

antd를 사용하는 방법에 대한 질문들은, Q&A 태그나 Stack Overflow antd 태그를 사용해 GitHub Discussions에 남겨주세요.

항상 그랬듯이, 우리는 숙련된 사용자들이 antd가 익숙하지 않은 사용자들을 돕는 것을 권장합니다.