antd design 설정하기

예전에 다른분이 추천을 하는 링크를 봐서 기억하고 있었는데 회사에서도 프론트 개발자분들이 주로 사용하는거 같아서 설정 방법을 알아봤다.

create-react-app으로 주로 사용하고 있어서 설정하는 방법을 정리 해볼까 한다.

프로젝트 생성

create-react-app으로 프로젝트를 생성한다.

1
2
3
4
5
6
# app 생성
$ create-react-app antd-setting
# 디렉토리 이동
$ cd antd-setting
# app 실행
$ yarn start

프로젝트 구조

생성된 프로젝트의 구조는 다음과 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── registerServiceWorker.js
└── yarn.lock

antd 설치

1
2
3
$ yarn add antd
or
$ npm install antd --save

css 설정하기

antd/dist/antd.css를 src/App.css 상위에 추가해 줍니다.

1
2
3
4
5
@import '~antd/dist/antd.css';

.App {
text-align: center;
}

component 사용하기

src/App.js를 아래와 같이 수정해서 버튼을 추가해 보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

class App extends Component {
render() {
return (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
}

export default App;

위와 같이 버튼에 css가 적용된걸 확인할 수 있다.

react-app-rewired 설치하기

위와 같이 준비를 하면 antd를 사용가능하지만 css에서 모든 파일을 import해서 쓰기 때문에 사용하지 않는 모든 파일을 가져오는건 낭비라고 생각한다. 그래서 webpack에서 설정해서 필요한것들만 불러와서 사용하게 변경해보자.

그러기 위해서 react-app-rewired 라이브러리를 활용해보려고 한다.
이 라이브러리는 create-react-app으로 생성한 프로젝트에서 webpack등 설정을 변경하려고 할때 eject를 사용하지 않고 설정을 변경할 수 있게 도와주는 라이브러리다.

먼저 설치를 해보자.

1
2
3
$ yarn add react-app-rewired --dev
or
$ npm install react-app-rewired --save-dev

babel-plugin-import 설치

1
2
3
$ yarn add babel-plugin-import --dev
or
$ npm install babel-plugin-import --save-dev

package.json 수정하기

1
2
3
4
5
6
7
8
9
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
}

config-overrides.js 파일 생성 & 수정

1
2
3
4
5
6
7
8
9
10
11
+ const { injectBabelPlugin } = require('react-app-rewired');

module.exports = function override(config, env) {

# css를 사용하는 경우
+ config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);

# less를 사용하는 경우
+ config = injectBabelPlugin(["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }], config);
return config;
};

src/App.css import 제거

1
2
3
4
5
6
7
- @import '~antd/dist/antd.css'; # 제거

.App {
text-align: center;
}

...

위와 같이 설정을 해주면 각 component에서 사용한 antd 컴포넌트만 import해서 사용하기 때문에 리소스 다운로드 낭비를 막을수 있다.

공유하기 댓글