Ant Design 설치부터 버튼·테이블·폼까지 – 실전으로 배우는 기본 컴포넌트

 

 

이번 포스팅에서는 **Ant Design(antd)**의 기본 사용법을 소개합니다.
MUI보다 Business UI에 강하고, 기능이 풍부해서
관리자 페이지나 백오피스 제작에 많이 사용되는 프레임워크입니다.

지금부터 설치부터 실전 예제까지 한 번에 살펴볼게요!

---

 

✅ antd 설치하기

npm install antd

 

그리고 스타일을 직접 import 해줘야 합니다:

import 'antd/dist/reset.css'; // v5 기준

 

---

 

✅ 1. Button 사용해보기

import { Button } from 'antd';

function App() {
  return (
    <div>
      <Button type="primary">Primary</Button>
      <Button>Default</Button>
      <Button type="dashed">Dashed</Button>
      <Button type="text">Text</Button>
    </div>
  );
}

 

타입	설명
primary	강조 버튼
default	일반 버튼
dashed	점선 테두리 버튼
text	텍스트 전용 버튼

 

---

 

✅ 2. Table 컴포넌트

import { Table } from 'antd';

const data = [
  { key: '1', name: '홍길동', age: 32, address: '서울' },
  { key: '2', name: '이순신', age: 45, address: '부산' },
];

const columns = [
  { title: '이름', dataIndex: 'name' },
  { title: '나이', dataIndex: 'age' },
  { title: '주소', dataIndex: 'address' },
];

function UserTable() {
  return <Table dataSource={data} columns={columns} />;
}

💡 테이블 정렬, 필터, 페이징 등 대부분 자동으로 지원됩니다.

 

---

 

✅ 3. Form 컴포넌트

import { Form, Input, Button } from 'antd';

function UserForm() {
  const onFinish = (values) => console.log(values);

  return (
    <Form onFinish={onFinish}>
      <Form.Item name="username" label="아이디" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item name="password" label="비밀번호" rules={[{ required: true }]}>
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">로그인</Button>
      </Form.Item>
    </Form>
  );
}

💡 검증, 자동완성, 에러 메시지까지 한 번에 가능!

 

---

 

⚙️ 스타일 커스터마이징 팁

antd는 스타일 커스터마이징이 좀 더 복잡하지만,
v5 기준으로 CSS-in-JS 기반 Token 시스템을 제공하므로
공식 문서를 통해 Theme 설정도 가능합니다.