[React.js] antd 컴포넌트 라이브러리

antd 컴포넌트 라이브러리

들어가며

• 리액트(React.js) 기반의 UI 컴포넌트 라이브러리 중 하나인 antd(Ant Design)에 대해 정리해본다.

 

Ant Design(antd)

개념

• 알리바바 그룹이 만든 리액트(React.js) 기반의 UI 컴포넌트 라이브러리
• 디자인 일관성을 유지하면서 생산성을 높이는 것을 목표로 만들어졌으며, 기업용 시스템 개발에 많이 사용된다.
• 주로 관리 시스템, 대시보드, 기업용 웹 애플리케이션 개발에 적합하다.

 

주요 특징

• 버튼, 입력 필드, 테이블, 모달, 폼, 차트 등 다양한 UI 컴포넌트를 제공한다.
  • @<Button>@, @<Form>@, @<Table>@, @<Modal>@, @<Menu>@, @<Tabs>@
• 대부분의 컴포넌트가 미리 스타일링되어 있어, 최소한의 설정으로 빠르게 개발 가능하다.
• 디자인 가이드라인을 따르며, 여러 컴포넌트를 조합해도 통일된 UI를 유지할 수 있다.
• 다양한 언어와 지역 설정을 지원(국제화(i18n) 지원)해 글로벌 서비스에 유리하다.
• 타입스크립트(TypeScript)와의 완벽한 호환을 제공해 안정적인 개발 환경을 제공한다.
• 반응형 웹 디자인을 고려하여 개발되었으며, 데스크톱과 모바일 모두 잘 동작 한다.
• 프로젝트의 요구에 따라 테마 색상, 폰트 등을 쉽게 커스터마이징할 수 있다.

 

장단점

• 컴포넌트가 풍부하고 사용하기 쉽다.
• 디자인 일관성이 뛰어나서 유지보수에 유리하다.
• 글로벌 서비스 개발에 적합한 국제화 기능을 제공한다.
• 일부 컴포넌트는 커스터마이징이 제한적일 수 있다.
• 초기 스타일이 무겁게 느껴질 수 있어, CSS 트리 쉐이킹이 필요할 수 있다.
• 모바일 친화적이지 않은 컴포넌트가 일부 존재한다.

 

설치하기

$ npm install antd   # yarn add antd

 

 

테마 커스터마이징

• antd는 Less 파일 기반의 테마를 지원하여 특정 테마 변수를 변경할 수 있다.
  • @config-overrides.js@ 파일에서 테마를 수정할 수 있다.

 

config-overrides.js

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' }, // 주 색상 변경
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

 

사용 예제

import { Button } from 'antd';

const App = () => (
  <div style={{ padding: '50px' }}>
    <Button type="primary">Primary Button</Button>
  </div>
);

export default App;

 

공식 문서

Ant Design of React - Ant Design

 

참고 사이트

Ant Design - The world's second most popular React UI framework

antd