Ant Design 설치 및 사용 시작하기: React 기반 UI 라이브러리인 Ant Design을 빠르게 설치하고 기본 사용법을 알려줄게요.
Ant Design 설치 및 사용 시작하기 – 시작 환경 준비
먼저 개발 환경을 점검하면 돼요. Node와 npm 또는 Yarn이 설치돼 있어야 해요.
React 프로젝트가 없으면 create-react-app이나 Vite로 새 프로젝트를 만들면 돼요.
필수 버전
Ant Design은 최신 React와 잘 호환돼요. 보통 React 17+ 환경이면 무난해요.
- Node 14 이상 권장
- React 17 이상 권장
Ant Design 설치 및 사용 시작하기 전에 Node, React 버전을 확인하고 새 프로젝트는 Vite나 CRA로 만들면 빨라요.
설치 방법: npm, Yarn, CDN으로 Ant Design 설치
가장 일반적인 설치는 npm이나 Yarn을 사용하는 방식이에요. 아래 명령어로 빠르게 설치하면 돼요.
npm / Yarn 설치
npm으로 설치하려면 npm install antd를 실행하면 돼요. Yarn은 yarn add antd를 사용하면 돼요.
설치 후에는 스타일을 불러와야 해요. 예를 들어 create-react-app에서는 index.js에 import ‘antd/dist/antd.css’를 추가하면 돼요.
CDN 사용
간단히 시험해보려면 CDN으로 CSS와 JS를 불러와도 돼요. 배포용으로는 번들링 방법이 더 권장돼요.
사용법: 기본 컴포넌트와 테마 적용하기
Ant Design 설치 및 사용 시작하기 다음에는 컴포넌트를 불러와 페이지에 배치하면 돼요. 버튼, 폼, 레이아웃 등 기본 컴포넌트가 잘 정리돼 있어요.
기본 사용 예시
간단한 예로 Button을 사용하려면 import { Button } from ‘antd’로 불러오고 JSX에서 <Button type=”primary”>클릭</Button>처럼 쓰면 돼요.
[이미지: Ant Design 컴포넌트 예시]
테마를 바꾸려면 ConfigProvider로 글로벌 설정을 감싸거나 Less 변수를 커스터마이징하면 돼요. Create React App에서는 craco 등을 이용해 Less 설정을 추가하면 편해요.
아이콘과 트리쉐이킹
ant-design/icons에서 필요한 아이콘만 가져오면 번들 크기를 줄일 수 있어요. 예: import { SmileOutlined } from ‘@ant-design/icons’.
프로덕션 빌드에서는 트리쉐이킹과 코드 스플리팅을 활용하면 성능 향상이 돼요.
버전 호환을 확인하지 않고 업데이트하면 스타일이나 API가 깨질 수 있어요. 주요 버전 업그레이드는 릴리즈 노트를 확인하면 돼요.
자주 쓰는 워크플로우는 로컬에서 컴포넌트 실험 후 스타일 커스터마이징, 최종적으로 번들 최적화하는 과정이에요.
- ☑️ Node/React 버전 확인
- ☑️ antd 설치 및 CSS 불러오기
- ☑️ ConfigProvider로 글로벌 설정
필요하면 테마 색상과 폰트만 바꿔 간단히 프로젝트 브랜딩을 적용하면 돼요.
요약하면, Ant Design 설치 및 사용 시작하기는 환경 확인 → 패키지 설치 → CSS 로드 → 컴포넌트 사용 순서로 진행하면 돼요.
핵심: Node/React 버전 확인 후 npm 또는 Yarn으로 antd를 설치하고 ConfigProvider로 테마를 적용하면 바로 사용 가능해요.