Ant Design은 리액트 애플리케이션에 사용하기 좋은 UI 라이브러리로써, 많은 기능과 컴포넌트를 제공합니다. 이 블로그에서는 Ant Design 라이브러리를 리액트 프로젝트에 추가하고 기본적인 컴포넌트를 사용하는 방법에 대해 알아보겠습니다.

목차

1. Ant Design 설치
2. 기본 컴포넌트 사용
3. 커스텀 테마 적용

Ant Design 설치

먼저, Ant Design 라이브러리를 프로젝트에 설치해야 합니다. npm 또는 yarn을 사용하여 다음 명령어를 실행하여 설치할 수 있습니다.

npm install antd

또는

yarn add antd

Ant Design 라이브러리를 설치한 후에는 리액트 프로젝트의 최상위 컴포넌트에서 스타일 및 레이아웃을 설정해야 합니다.

import 'antd/dist/antd.css';

기본 컴포넌트 사용

이제 Ant Design 라이브러리에 포함된 기본 컴포넌트를 사용할 수 있습니다. 예를 들어, 버튼, 입력창, 그리드 등을 사용하여 사용자 인터페이스를 구축할 수 있습니다.

import React from 'react';
import { Button, Input } from 'antd';

const App = () => {
  return (
    <div>
      <Button type="primary">Primary Button</Button>
      <Input placeholder="Basic input" />
    </div>
  );
};

export default App;

커스텀 테마 적용

Ant Design에서는 Less 파일을 사용하여 커스텀 테마를 적용할 수 있습니다. 기본 테마 변수를 재정의하거나 새로운 테마 변수를 추가하여 커스텀 테마를 만들 수 있습니다.

예를 들어, theme.less 파일을 만들고 다음과 같이 변수를 재정의하여 커스텀 테마를 정의할 수 있습니다.

@primary-color: #1890ff;

이후, 빌드 프로세스에서 해당 Less 파일을 가져와서 커스텀 테마를 적용하면 됩니다.

결론

이제 Ant Design 라이브러리를 리액트 프로젝트에 추가하고 기본 컴포넌트를 사용하는 방법에 대해 알아보았습니다. 더 많은 컴포넌트와 기능을 활용하여 사용자 친화적인 애플리케이션을 개발할 수 있습니다.

더 많은 정보는 Ant Design 공식 문서를 참고하시기 바랍니다.