React UI library antd 정보 (1) - Button
React UI library antd 정보 (2) - Layout
React UI library antd 정보 (3) - redux-form

React UI 라이브러리 인 antd을 사용해 보았습니다.

antd를 사용하는 것은 매우 간단합니다. components도 종류가 많기 때문에 살아납니다.

이번에는 설치에서 설명하고 싶습니다. 예를 들어 Button components를 사용해 보겠습니다.

1. 설치

먼저 Create React App에서 환경을 만듭니다. 최근에는 npm이 아닌 yarn을 사용하는 것이 흐름처럼 보입니다.
Getting Started - Create React App

yarn create react-app antd-demo
cd antd-demo
yarn start

이 시점에서 브라우저에서 액세스하여 설치가 올바르게 수행되었는지 확인합니다.

그런 다음 antd를 설치합니다.

yarn add antd

이것으로 설치가 종료됩니다.

2. Button components

Button components

여러 종류의 Button을 나란히 봅니다. import하고 Button 태그를 정렬하기만 하면 됩니다. 간단하네요. antd.css(App.css)를 가져와야 합니다.

src/App.js

import React, { Component } from 'react';
import Button from 'antd/es/button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App" style={{ margin: '10px'}}>
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="danger">Danger</Button>
        <Button type="link">Link</Button>
      </div>
    );
  }
}

export default App;

그런 다음 antd.css를 사용하기 위해 App.css의 시작 부분에 다음 줄을 삽입합니다.
webpack에서 node_modules 아래의 css를 import할 때 path에 물결표(~)를 넣어 node_modules 아래의 경로를 해결할 수 있습니다.

src/App.css

@import '~antd/dist/antd.css';
---

3. 실행 화면

이 레벨에서는 Material-UI나 Bootstrap과 크게 다르지 않네요.



이번은 이상입니다.