LIME

공부하고 기록하는 블로그

1 분 소요

Ant Design이란?

Ant Design은 알리바바 그룹에서 개발한 UI 라이브러리로 리액트와 타입스크립트(Typescript)를 기반으로 제작되었으며 Layout, Button, Grid, Card 등 다양한 컴포넌트를 지원합니다.

Ant Design을 사용하게 된 계기

스프링으로 웹 개발을 하면서 인기 높은 CSS 프레임워크인 부트스트랩을 사용했던 적이 있습니다. 개인적으로 부트스트랩을 사용해보니 커스터마이징도 쉽고 개발 속도도 빨라져서 굉장히 편리하다고 느꼈는데요. 최근 회사에 입사하여 리액트로 개발을 하게 되면서 리액트에도 편하게 개발을 도와주는 Ant Design이 있다는 것을 알게 되었습니다. 많은 부분이 컴포넌트로 구현이 되어 있고 admin 페이지를 만들기 좋은 라이브러리다보니 실제로 회사에서 Antd를 사용하는 경우가 꽤나 많다고 합니다.

Ant Design의 장점

디자인이 깔끔하고 예쁘다.
엄청나게 많은 컴포넌트들을 제공한다.
빠르게 완성도 높은 admin 페이지를 제작할 수 있다.

Ant Design의 단점

커스터마이징이 어렵다.
많은 것을 제공하므로 용량이 크다.

설치 방법

1

npm install antd

1

사용 방법

1

import "antd/dist/antd.css";

npm으로 설치가 완료되면 index.js에 위와 같이 스타일을 import 하고 손쉽게 사용 가능합니다.

툴팁 띄워보기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { Button, Tooltip } from "antd";
import { FilterOutlined } from "@ant-design/icons";
import "./App.css";

function App() {
  return (
    <div className="App">
      <>
        <br />
        <br />
        <br />
        <div className="Menu">
          <Tooltip placement="top" title="툴팁!!">
            <Button shape="round" icon={<FilterOutlined />} />
          </Tooltip>
        </div>
      </>
    </div>
  );
}

export default App;

2

Ant Design 공식 홈페이지

https://ant.design/

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)

댓글남기기

참고