React와 함께 Ant 디자인을 사용하기 위한 종합 가이드

Ant Design(AntD)은 널리 사용되는 디자인 시스템이자 React UI 구성 요소 라이브러리입니다. React 애플리케이션에서 우아하고 사용자 친화적인 인터페이스를 구축하기 위해 미리 디자인되고 사용자 정의 가능한 고품질 UI 구성 요소 세트를 제공합니다. Ant Design은 머티리얼 디자인의 원칙을 따르며 최신 웹 애플리케이션에 일관되고 응집력 있는 디자인 언어를 제공합니다.

Ant 디자인의 주요 특징:

1. 종합 구성 요소 라이브러리: Ant Design은 버튼, 입력, 양식, 모달, 테이블, 날짜 선택기 등과 같은 광범위한 구성 요소를 제공합니다. 이러한 구성 요소는 사용 편의성과 일관된 스타일에 중점을 두고 설계되었습니다.

2. 사용자 정의 가능: Ant Design은 테마를 통해 사용자 정의 옵션을 제공하므로 색상, 글꼴, 간격 등과 같은 스타일을 조정할 수 있습니다. 내장된 테마를 사용하거나 프로젝트 브랜딩에 맞게 사용자 정의할 수 있습니다.

3. 반응형 디자인: Ant Design의 구성 요소는 기본적으로 반응형이므로 모바일 친화적인 레이아웃을 쉽게 만들 수 있습니다. Ant Design은 다양한 화면 크기에 걸쳐 레이아웃을 구성하는 데 도움이 되는 그리드 시스템과 같은 유틸리티를 제공합니다.

4. 국제화(i18n): Ant Design은 국제화를 지원하고 날짜 형식, 숫자 형식 등을 포함하여 여러 언어를 기본적으로 지원하는 구성요소를 제공합니다.

5. 접근성: Ant Design 구성 요소는 접근성을 염두에 두고 설계되어 장애가 있는 사용자를 위한 키보드 탐색 기능과 화면 판독기 지원을 제공합니다.

6. 풍부한 생태계: Ant Design에는 Ant Design Pro(엔터프라이즈 애플리케이션용 스캐폴드) 및 Ant Design과 같은 도구 및 라이브러리 세트도 포함되어 있습니다. 시각적 데이터 표현을 위한 차트

7. TypeScript 지원: Ant Design은 우수한 TypeScript 지원을 제공하여 더 나은 유형 안전성과 향상된 개발자 경험을 보장합니다.

8. 디자인 지침: Ant Design은 통일되고 일관된 사용자 경험을 만들기 위해 명확한 디자인 원칙과 패턴 세트를 따릅니다. 애플리케이션 전체에서 응집력 있는 모양을 유지하려는 개발자에게 이상적입니다.

React에서 Ant 디자인을 시작하는 방법:

1. React에 Ant Design 설치

Ant Design을 설치하려면 npm 또는 Yarn을 사용하여 React 프로젝트에 추가하세요.

npm install antd

그런 다음 index.js 또는 App.js에서 CSS 파일을 가져와 Ant Design의 전역 스타일을 적용합니다.

npm install antd

2. React에서 Ant 디자인 컴포넌트 사용하기

Ant Design이 설치되면 해당 구성 요소를 사용할 수 있습니다. 다음은 몇 가지 예입니다.

예 1: Ant 디자인 버튼

import 'antd/dist/antd.css';

1. craco.config.js 파일을 만듭니다.

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

function App() {
  return (
    <div>



<p>In this example, we import the Button component from antd and use it in our React component. You can easily change the button type (primary, danger, default, etc.) and apply additional styling or functionality.</p>

<h5>
  
  
  Example 2: Ant Design Grid System
</h5>

<p>Ant Design comes with a flexible grid system that makes it easy to create responsive layouts. Here's an example of a responsive layout using Ant Design’s Row and Col components:<br>
</p>

<pre class="brush:php;toolbar:false">import React from 'react';
import { Row, Col } from 'antd';

function App() {
  return (
    <div>



<p>In this example:</p>

<ul>
<li>
Row is used to define a flex container for the columns.</li>
<li>
Col is used to define individual columns.</li>
<li>The gutter prop adds space between the columns.</li>
<li>The xs, sm, and md props make the layout responsive across different screen sizes.</li>
</ul>

<h5>
  
  
  Example 3: Ant Design Modal
</h5>

<p>Ant Design's Modal component allows you to easily create modal dialogs.<br>
</p>

<pre class="brush:php;toolbar:false">import React, { useState } from 'react';
import { Button, Modal } from 'antd';

function App() {
  const [visible, setVisible] = useState(false);

  const showModal = () => setVisible(true);
  const hideModal = () => setVisible(false);

  return (
    <div>



<p>In this example, we use useState to control the visibility of the modal. The Button triggers the modal, and Modal displays the dialog with an <strong>OK</strong> and <strong>Cancel</strong> button.</p>

<h4>
  
  
  3. <strong>Customizing the Ant Design Theme</strong>
</h4>

<p>Ant Design allows you to customize its default theme to fit your project’s branding by modifying variables.</p>

<h5>
  
  
  Example: Customizing Button Color
</h5>

<p>You can use a <strong>Less</strong> file to modify Ant Design’s default theme. To do this, you'll need to configure your webpack or use tools like <strong>Create React App</strong> with <strong>craco</strong> or <strong>customize-cra</strong>.</p>

<ol>
<li>Install <strong>craco</strong>:
</li>
</ol>

<pre class="brush:php;toolbar:false">   npm install @craco/craco

이렇게 하면 Ant 디자인 구성 요소(예: 버튼)의 기본 색상이 #1DA57A로 변경됩니다.

4. Ant 디자인 아이콘 사용

Ant Design은 앱 UI를 향상하기 위해 다양한 SVG 아이콘 세트를 제공합니다. 구성 요소에서 직접 사용할 수 있습니다.

   module.exports = {
     style: {
       less: {
         modifyVars: {
           '@primary-color': '#1DA57A',
         },
         javascriptEnabled: true,
       },
     },
   };

그런 다음 아이콘을 가져와 사용하세요.

'react'에서 React를 가져옵니다.
'antd'에서 { 버튼 }을 가져옵니다.
'@ant-design/icons'에서 { SmileOutlined }를 가져옵니다.

함수 앱() {
  반품 (
    <div>



<p>이 예에서는 @ant-design/icons 패키지의 SmileOutlined 아이콘을 사용하여 Button 구성 요소에 추가합니다.</p>

<h3>
  
  
  결론
</h3>

<p>Ant Design은 현대적이고 반응성이 뛰어난 React 애플리케이션을 구축하기 위한 광범위한 UI 구성요소 세트를 제공하는 강력하고 포괄적인 디자인 시스템입니다. 사용자 정의 가능성, 접근성 기능, 일관된 디자인 원칙 덕분에 디자인에 너무 많은 시간을 들이지 않고 세련되고 사용자 친화적인 인터페이스를 만들고자 하는 개발자에게 탁월한 선택이 됩니다.</p>

<p>국제화 지원, 반응형 그리드 시스템, 손쉬운 사용자 정의 기능을 갖춘 Ant Design은 기업 수준의 애플리케이션이나 소규모 프로젝트를 만드는 데 탁월한 도구입니다.</p>


          </div>