Antd Design이 뭔데?

Antd?

Antd Design은 쉽게 말하면, 중국에서 만든 웹 프론트 개발을 위한 프레임워크이다.
프론트에서 사용되는 여러 요소들을 컴포넌트화 하여 그저 가져다 쓰면 웹 페이지에 만들고자 하는 기능을 쉽게 구현하는 것이 가능하다.

프론트엔드에서 많이 사용되는 기능들 (form, input, navigate 등등)이 이미 만들어져 있어서 antd에서 제공하는 api와 property만을 잘 숙지하여 사용하면, 쉽게 제작이 가능하다라는 장점이 있다.

주로 리액트에서 사용이 된다.

사용법

사용법은 쉽다. 설치 이후, 다른 리액트 패키지들 처럼 antd 패키지를 import 하면 끝난다.

 npm install antd
 
 or
 
 yarn add antd
 

코드상에선 다음과 같이 사용한다.

import {Form, Input} from 'antd';

function inputFn(){
  ....
  
  return (
    <Form>
    	<Input/>
    </Form>
  )
}

이렇게, 그냥 일반 패키지처럼 가져다 사용하면 끝이다. 아주 간단하다.
자세한 사용법이나, 각 컴포넌트의 사용법은 antd design의 공식 사이트에 개제되어있다.

antd design

이외에도 정말 다양한 컴포넌트들을 제공하고 있다. 본인이 직접 styled component로 만들어서 사용하는 방법도 좋은 방법이지만, 거의 기본적인 기능이 만들어져 있는 UI 패키지를 사용해 보는 것도 하나의 좋은 방법이라고 생각한다.