Ant_Design

Ant_Design은 JavaScript라이브러리에서 사용되는 CSS 프레임워크

Ant_Design은 React, Vue.js, Angular…등의 JavaScript 라이브러리에서 사용하는 CSS프레임워크이다.

Ant_Design이 제공하는 다양한 컴포넌트로 인해 보다 간편하게 UI/UX를 구현할 수 있어 생산성이 높아진다.

다만 디자인이 획일화되어 개성이 없어지는 단점이 있어 고객이 있는 서비스에서는 Customizing하여 사용하는 것을 권장한다.

사용방법

Ant_Design을 프로젝트에 적용하는 방법은 다음과 같다.

1. 아래 명령어를 통해 관련 패키지를 설치한다.

npm i antd 
npm i @ant-design/icons

2. 컴포넌트에 Ant_Design CSS파일을 적용한다.
   보통 페이지들의 공통사항을 관리하는 파일에서 일괄적으로 적용한다.

// pages > _app.js
import 'antd/dist/antd.css'; // 모든 컴포넌트에 Ant_Design css파일 적용
import PropTypes from 'prop-types';

const App = ({ Component }) => {
	return (
		<>
	      <Component />
		</>
	)
}

App.propTypes = {
  Component: PropTypes.elementType.isRequired,
}

export default App;

3. Ant_Design홈페이지에서 사용할 컴포넌트를 선택해 프로젝트에 적용한다.

// components/AppLayout.js
import React from 'react';
import PropTypes from 'prop-types';

import { Menu } from 'antd'; // Antd Menu컴포넌트 불러오기
import { MailOutlined, EditOutlined, RedoOutlined } from '@ant-design/icons'; // Antd Icon 불러오기

const HomeMenu = ({ children }) => {
  return (
    <>      
      <Menu mode='horizontal'>
        <Menu.Item key="mail" icon={<MailOutlined />}>
          Check Mail
        </Menu.Item>

        <Menu.Item key="write" icon={<EditOutlined />}>
          Post Write
        </Menu.Item>
        
        <Menu.Item key="refresh" icon={<RedoOutlined />}>
          Page Refresh
        </Menu.Item>
      </Menu>      
    </>    
  )
};

AppLayout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default HomeMenu;

Ant_Design 컴포넌트들은 역활, 사용방법, API...등 각각 달라 필요시에 공식 홈페이지를 참고해서 사용하는 것을 권장한다.

참고 자료

Ant_Design 공식문서
React로 NodeBird SNS 만들기 - 제로초