Ant Design
중국에서 만든 웹, 앱 디자인 개발을 위한 프레임워크입니다!
저는 React 만 다뤄봐서 React 에 초점을 맞춰 설명하겠습니다!
React 로 프론트 쪽 작업을 하다보면, 디자인이 필요한 경우가 생깁니다.
그런데 저희같은 (아마도 저만..) 그림 감수성이라고는 거리가 먼 사람들은 툴 없는 디자인이란 정말 높은 산과도 같죠. 코드 1000줄 쓰는 것 보다 레이아웃 잡고, 색 고르고 모양 신경쓰는게 더 어려울 수도 있습니다...
그런 저에게 Ant Design은 그저 사막에 내리는 단비 같은 존재 였습니다.
암튼 Ant Design 짱짱. 바로 사용법 들어갑니다.
사용법
0. React 사용
우선 기본적으로 react를 다룰 줄 아는 것을 기본으로 전제하고 설명하겠습니다.
React 를 처음사용하시는 분은 이 링크를 참고해 주세요.😃
https://programming119.tistory.com/99?category=887784
[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ① 설치 및 세팅
아마 대부분 React 개발을 하실 때 $ npx create-react-app 요런 명령어를 이용하셔서 간편하게 설치하셨을거라 생각합니다. 이 명령어 하나만으로 참 편리하게 알아서 뚝딱뚝딱 필요한 것들이 절로 생�
programming119.tistory.com
1. Ant Design 설치
* React 와 React-dom, typescript 는 기본적으로 설치가 돼있어야 합니다.
루트 경로의 터미널에다가 antd 와 @types/antd 를 설치해줍니다!!
@types/antd 는 antd의 타입을 의미해요
그리고 ant에서 제공하는 아이콘도 이용하실거면 @ant-design/icons 도 추가로 설치해주세요!
package.json 이 위 사진과 같이 되어있어야 합니다.
2. 사용할 디자인 쇼핑
사실 가장 중요한 부분입니다. 프로그램이랑 잘 맞는 이쁜 디자인을 골라야 하죠!
앤트디자인 공식문서에는 대략적인 디자인 overview가 있습니다!
https://ant.design/components/overview/
이걸 보시고 입맛에 맞는골라주세요 😋
저는 이쁜 별점을 만들어주는 Rate을 사용해보겠습니다!
별점도 생각보다 꽤나 다양합니다.
저 부분을 누르면 해당 디자인의 코드가 자세히 나옵니다.
이런식으로요!
이 코드를 필요한 부분만 복사하셔도 되고, 잘 감이 안오신다면 일단 전체를 복사해봅시다.
3. Antd 컴퍼넌트 사용
저는 편의상 코드샌드박스 (인터넷 상으로 코딩해주는 사이트) 에서 실행하겠습니다.
복사한 코드가 다음과 같으실 것이고, 문제가 없다면 별이 출력화면에 잘 뜰 것이에요.
코드를 조금 분석해보겠습니다~
3-1. 필요한 것 import 하기
이부분이 Rate 를 import 해오는 코드입니다.
Rate 말고도 Button, Text 같은 엄청 다양한것들이 많습니다. 마찬가지로 사용하고 싶으시면 위와 같이 import 해오시면 됩니다.
3-2. 사용하기, props
Rate는 JSX 태그와 마찬가지로 작동합니다.
antd 의 이 JSX들 마다 각각의 props 들이 있고, 크기나 디자인, 애니메이션 등을 지정해줍니다.
예를들면, tooltips = {desc} 로 지정되어있죠.
윗 라인을 보시면
desc 는 다음과 같습니다.
별점이 1개 이하일때 'terrible'
2개 이하일 때, 'bad'
3개 ~~~ 이하생략
이런식으로 표현하기 위해 정해둔 것이죠!
당연히 직접 커스텀해서 사용도 가능합니다.
마찬가지로 onChange도 이 JSX 태그들이 바뀌었을 때, 어떤 액션을 취할건지 결정해주는 함수를 인자로 받습니다!
그렇다면 이 props들을 어떻게 아느냐구요??!?!?!
아까 보던 ant design 페이지 밑에 내려가보시면 자세히 설명되어있습니다.
설명도 엄청 잘 해뒀습니다.
여기서 속성들을 보시고 타입에 맞게 잘 이용하시면 됩니다.
마치며
Ant design은 @types/antd 만 잘 설치하셨다면 웬만하면 타이핑이 따로 필요도 없고 위와 같이 설명도 잘 나와있어서
이용하기 너무나 편합니다. 제 입문글을 읽으셔서 감이 좀 잡히셨다면 공식문서 정독하시면 도움이 될 것 같네요~ 🤩
https://ant.design/docs/react/introduce
Ant Design of React - Ant Design
Polyfills are needed for IE browsers. We recommend @babel/preset-env for it. You can set targets config if you are using umi. [email protected] supports both React 15 and 16 but we strongly suggest React 16 for better performance and fewer bugs. We recomm
ant.design
다음 게시글은 Ant-design 아이콘을 이용하는 법으로 돌아오겠습니다~ 뿅⭐
댓글