[React] ant Design 사용하기

🌱 ant Design

📌 중국에서 개발한 React UI 라이브러리 프레임워크

📌 사이트 : https://ant.design/

 

🌱 사용방법

📌 설치하기

npm install antd

 

📌 ant design 사용해보기

공식 사이트 가이드(https://ant.design/docs/react/getting-started)에 나와있는 것처럼 'datePicker'을 사용

react 프로젝트 생성은 이전 글(https://rosyhuedoyou.tistory.com/91) 참조

 

//app.js

import React, { useState } from 'react';
import { DatePicker, message } from 'antd';
import 'antd/dist/antd.css';

function App() {
  const [date, setDate] = useState(null);
  const handleChange = value => {
    message.info(`Selected Date: ${value ? value.format('YYYY-MM-DD') : 'None'}`);
    setDate(value);
  };
  return (
    <div style={{ width: 400, margin: '100px auto' }}>
    <DatePicker onChange={handleChange} />
    <div style={{ marginTop: 16 }}>
      Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'}
    </div>
  </div>
  );
}

export default App;

 

위와 같이 웹 사이트에 ant design의 datepicker이 잘 적용된 것을 확인 할 수 있다

 

📌 다른 컴포넌트 사용해보기

공식 사이트의 components 페이지(https://ant.design/components/overview/)에 가면 다양한 컴포넌트들을 확인 할 수 있다

이들 중 원하는 것을 찾아서 'Expand all code'  버튼을 누르면 컴포넌트의 코드를 확인 할 수 있는데, 이를 제작하는 웹 사이트에 적용해 넣으면 된다