Ant 디자인을 사용하여 React 테마를 사용자 정의하는 방법

좋은 사용자 인터페이스(UI) 디자인이 웹사이트 청중을 참여시키고 전환으로 이끄는 데 큰 역할을 한다고 말하는 것은 다소 절제된 표현입니다. 좋은 UI는 상호작용적이고 직관적이며 풍부하고 접근하기 쉬운 디자인이 필요하지만 - 겉보기에는 벅찬 도전처럼 보이지만 고품질 구성 요소와 라이브러리를 사용하여 빌드할 때 달성할 수 있습니다.

이 중 가장 인기 있는 것은 Ant 디자인입니다. 우아하고 빠른 사용자 인터페이스를 구축하기 위해 사용하기 쉬운 고품질 구성 요소에 액세스할 수 있는 React UI 라이브러리입니다.

왜 앤트 디자인인가?

Alibaba가 만든 Ant 디자인 시스템은 Alibaba(물론), Tencent, Baidu 등과 같은 여러 유명 기업에서 사용합니다.

가장 많이 사용되는 React UI 라이브러리가 되었습니다. 이전에 Material-UI는 Github에서 75,000개 이상의 별을 가지고 가장 인기가 많았지만 이제 Ant Design이 77,500개로 그들을 추월했습니다!

Ant 디자인이 그토록 잘 한 것은 디자인을 인간화하는 것입니다. 자연성, 확실성, 의미성, 성장성이라는 인간의 의식과 행복 중심의 4가지 가치를 측정하여 디자인의 품질을 평가합니다. 그것들은 디자이너를 위한 표준 역할을 하고 의사 결정과 더 나은 판단을 안내합니다.

개미 디자인 구성 요소

Ant 디자인(또는 antd)은 웹사이트 또는 앱 경험을 향상시킬 수 있는 다양한 UI 구성요소를 제공합니다. 아래에서 그 중 일부를 확인하지만 더 많은 옵션을 보려면 여기를 방문하십시오.

범용 구성 요소: 버튼, 아이콘, 타이포그래피 등

레이아웃: 그리드, 레이아웃, 간격 등

탐색: 탐색 경로, 메뉴, 드롭다운 메뉴 등

데이터 입력: 자동완성, 체크박스, 날짜 선택기 등

데이터 표시: 아바타, 댓글, 접을 수 있는 패널 등

React 및 Ant 디자인 설치

이제 Ant 디자인에서 사용할 수 있는 구성 요소를 알았으므로 React의 기본 설치 프로세스를 배우고 Ant 디자인을 설치해 보겠습니다.

yarn 또는 npm 을 사용하여 React 프로젝트를 설정할 수 있습니다. 다음은 React를 설치하고 설정하는 기본 명령입니다.

 $ yarn create react-app antd-demo # or $ npx create-react-app antd-demo $ cd antd-demo $ yarn start

React가 설치되면 브라우저에서 실행 중인 앱을 볼 수 있습니다.

이것은 새로 생성된 프로젝트에서 생성된 기본 디렉터리입니다. 앞으로 최종 출력을 달성하기 위해 여기에서 일부 파일을 수정할 것입니다.

 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── logo.svg └── yarn.lock

이제 React를 설정한 후 다음 명령으로 Ant 디자인을 설치해 보겠습니다.

 $ yarn add antd

antd를 설치한 후 프로젝트의 src 폴더 안에 있는 App.js의 마크업을 수정하여 Ant 구성 요소를 사용할 수 있습니다. 여기에 Ant의 버튼 요소를 추가하고 있습니다.

 import React from 'react'; import { Button } from 'antd'; import './App.css'; const App = () => ( <div className="App"> <Button type="primary">Button</Button> </div> ); export default App;

개미 버튼 구성 요소:

앱을 저장하고 실행하면 브라우저에서 Ant 기본 버튼 요소를 파란색으로 볼 수 있습니다(위 그림 참조). 이것은 Ant가 React에 성공적으로 통합되었음을 의미합니다.

테마 사용자 정의

Ant Design을 React와 통합할 때 가장 좋은 점은 기본 색상, 테두리 반경, 테두리 색상 등을 포함하여 비즈니스 또는 브랜드 요구사항의 UI 다양성을 충족하도록 디자인 토큰을 사용자 정의할 수 있다는 것입니다.

이미지 크레디트 : 인톨리

이러한 사용자 지정을 허용하려면 몇 가지 고급 구성을 수행해야 합니다.

고급 구성:

이 시점에서 create-react-app의 기본 구성을 사용자 정의해야 합니다. create-react-app의 사용자 지정 구성을 위한 커뮤니티 솔루션인 CRACO (Create React App Configuration Override)를 사용해 보겠습니다.

1단계: 먼저 CRACO를 설치하고 package.json에서 기본 React-script를 CRACO로 교체해야 합니다.

 $ yarn add @craco/craco /* package.json */ "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", + "start": "craco start", + "build": "craco build", + "test": "craco test", }

테마 구성의 요구 사항에 따라 사용자 지정 테마는 less-loader에서 제공하는 것과 유사한 Less 변수 재정의 기능을 사용해야 합니다. 더 적은 스타일을 로드하고 변수를 수정하는 데 도움이 되도록 Craco-less를 도입할 수 있습니다.

 $ yarn add craco-less

2단계: src/App.css 파일을 src/App.less 로 수정하고 app.less의 antd.css 위에 antd.less 파일을 가져옵니다.

 /* src/App.js */ - import './App.css'; + import './App.less'; /* src/App.less */ - @import '~antd/dist/antd.css'; + @import '~antd/dist/antd.less';

3단계: 루트 디렉토리에 craco.config.js 를 생성하여 기본 구성을 수정합니다.

 const CracoLessPlugin = require('craco-less'); module.exports = { plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, javascriptEnabled: true, }, }, }, }, ], };

여기서 less-loader는 테마 설정에 사용되는 modifyVars 입니다.

녹색 버튼이 보이면 구성이 성공한 것입니다. 이제 제공된 토큰/변수를 사용하여 고유한 색상 세트로 테마를 사용자 정의할 수 있습니다.

Ant 디자인 스타일 변수

다음은 가장 일반적으로 사용되는 일반 변수 중 일부입니다. 여기를 방문하여 사용 가능한 모든 스타일 변수에 대한 세부 정보를 얻을 수 있습니다.

 @primary-color: #1890ff; // primary color for all components @link-color: #1890ff; // link color @success-color: #52c41a; // success state color @warning-color: #faad14; // warning state color @error-color: #f5222d; // error state color @font-size-base: 14px; // major text font size @heading-color: rgba(0, 0, 0, 0.85); // heading text color @text-color: rgba(0, 0, 0, 0.65); // major text color @text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color @disabled-color: rgba(0, 0, 0, 0.25); // disable state color @border-radius-base: 2px; // major border radius @border-color-base: #d9d9d9; // major border color @box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers