[노드, 리액트 기초 | React] #20. AntD CSS Framework

모든 것을 CSS를 사용해서 하나하나 일일이 장인정신으로 한땀한땀 하자하면 너무나 많은 시간을 할애하게 되고 무엇보다 나는 디자인 능력이 꽝이다. 아마 대다수의 개발자들이 빠르게 CSS 작업을 하기 위해 CSS Framework를 사용하는 것 같다. 깔짝거리기만 해봤지 하나를 잡고 해본적이 없어 거의 처음이나 다름없는데 입문을 Ant Design으로 해보려한다.

지금 적고 있는 글 기준 3일 전에 올라온 따끈따끈한 2022년 기준 핫한 React UI Framework들을 정리된 글인데 2위로 당당하게 AntD가 등재되어있다.

Ant Design의 단점으로는 사이즈가 좀 큰편이고, 장점으로는 스타일이 깔끔하고 엔터프라이즈 환경에도 어울리는 디자인을 만들어낼 수 있다.(깔끔하고 세련되고 과하지않고 적절하다는 말) 쓰기가 편하다고 하는데 요것은 써봐야 알 것 같다.

AntD 세팅

1. antd 다운

npm install antd --save

react의 dependency이기 때문에 client 디렉토리로 이동해서 다운받아준다.

2. client/index.js 파일에 stylesheet 추가

import "antd/dist/antd.css";

요렇게 import 해준다!

➕ 참고

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 를 공부하며 작성한 글입니다.