[Ant-Design] React에서 간단하게 토스트팝업/스낵바 만들기, Ant-Design 사용 후기 및 장단점

프로젝트 팀원이 알려준 React UI 라이브러리인 Ant-Design을 소개하면서,

React에서 간단히 토스트팝업(스낵바)을 만드는 코드를 소개하겠다.

 

Ant-Design이란?

중국의 Alibaba Group에서 개발한 UI 컴포넌트 라이브러리이다. 

페이지네이션, 테이블, 드롭다운, 애니메이션 등 다양한 UI 컴포넌트를 제공한다.

Bootstrap, material design, MUI 등 UI 라이브러리와 같은 역할을 한다.

 

 

간단히 토스트팝업/스낵바 만들기

1. install

npm install antd

yarn add antd

 

2. import

import { message } from "antd";

 

3. message.

message.success("성공!");
message.error("실패!");
message.warning("경고!");

로딩, 위치 커스텀 등의 더 많은 예시가 궁금하다면 아래의 링크를 참고 바란다.

https://ant.design/components/message

 

 

 

장점

1. 단순한 문법

위의 코드에서 본 것처럼, 사용법이 매우 간단하다.

 

2. 완성도 있고 다양한 UI 컴포넌트

간결한 코드에 비해 완성도 있는 디자인을 보여준다.

제공하는 컴포넌트의 종류도 매우 방대하다.

컴포넌트 페이지

 

3. 친절한(?) 공식 문서

공식 문서에서 다양한 사용 예시들을 볼 수 있다. (영어)

Components 페이지에서 다양한 컴포넌트들과 온라인 코드 에디터를 통한 사용 예시들을 확인할 수 있다.

 

 

 

단점

1. 중국 중심의 커뮤니티, 한국 자료가 별로 없음

중국에서 만들어진 라이브러리 답게 커뮤니티도 중국 중심이며, 깃허브 이슈도 중국어가 많다. 

한국 사용자가 많이 없다. 구글에 검색해 봐도 Ant Design을 사용한 한국어 자료가 거의 없다.

따라서 공식 문서(영어 지원)를 참고하거나 해외 커뮤니티를 참고해야 한다.

 

2. 커스터마이징 한계

단순한 문법으로 UI를 구현할 수 있지만,

자유로운 커스터마이징이 필요한 프로젝트에선 적합하지 않을 수 있을 것 같다.

 

 

 

관심이 있다면 아래의 링크들을 살펴보길 바란다.

ref
- Ant Design 공식 페이지
https://ant.design/
- ant-design github
https://github.com/ant-design/ant-design
- npm antd
https://www.npmjs.com/package/antd