React10일차-antdesign

오늘은 antdesign을 알아보겠다. 이것은 흔히 부트스트랩 같이 이해하면 편하다 디잔인을 미리 여러개 만들어놓고 다른사람이 만들어놓은걸 편하게 끌어다 쓰는 개념이다.

이제 스스로 react-create-app을 만들어서 거기에서 새터미널을 열어보자 (힌트 npm아니고 npx다)

완성화면

그다음 npm i antd 로 설치해보자

그다음 src/index.js로 이동(App.js 아니다)

그리고 import 모인곳에 import "antd/dist/antd.css" 입력

그럼 이제 antddesign을 입력하면 제대로 css가 적용되고 나올것이다.

이제 https://ant.design/ 여기 antdesign 사이트로 이동해보자

홈페이지

이제 여기서 내가 원하는걸 찾아서 쓰면된다.  우선 Components 클릭

이런창이 뜨면 calendar검색 해보자

나온것을 클릭

여기서 내려서 마음에 드는것을 찾고 그밑에 <>이거클릭

그럼 이런식으로 코드가 뜨면 필요한 부분을 가져가서 쓰면됩니다.

import { Calendar } from 'antd';

function onPanelChange(value, mode) { console.log(value.format('YYYY-MM-DD'), mode); }

ReactDOM.render(<Calendar onPanelChange={onPanelChange} />, mountNode);

이렇게 있느데  우리는 import부분 과 <Calendar onPanelChange={onPanelChange} />이게 필요한데 

onPanelChange={onPanelChange}  이건 함수를 부르는건데 함수를 보니까 그냥 콘솔에 찍는거니까 이부분도 지우겠습니다.

이걸 src/App.js에 가서import는 import모여있는데 <Calendar/>는 header 내부중 젤 하단에 추가해줄께요

이제 npm start 해서 적용 됬나 확인해보면

짠 적용이 잘되었습니다. ㅎㅎ 이렇게 편하게 디자인된것을 가져올수 있게 되었습니다.

그런데 antd모든 css 를 적용하면 어려울수있습니다 어쩌다가 우리가 만든 컴포넌트가 antdesign이름이랑 같아버리면 오류가 나올수 잇습니다. 그럴때는 node _modules에 들어가서 antd폴더를 들어가서 해당 컴포넌트 위치를 찾아서 

import Calendar from "antd/es/calendar";//내용부분

import "antd/es/calendar/style/css";//css부분

이런식으로 찾아서 따로 적용해주시면 해당 컴포넌트 css만 적용이 됩니다.

 

calendar 경로

뭐 이런경우는 얼마없을꺼고 겹치면 이름만 살짝 바꺼주면 해결 될거라고 생각합니다.

그럼 제대로 작동이 되나 볼까요?? 아까 App.js에 import 에 적은것은 지워 주고

import Calendar from "antd/es/calendar";

import "antd/es/calendar/style/css";

이걸 적어주세요

저장하고 아가 npmstart로 킨것을 보면

잘 작동이되네요 ㅎㅎ 

그럼 마지막으로 antdesing사이트에 있는 icon사용은 조금 다르므로 한번 알아보겠습니다. 우선 antdisign사이트로 go go

components 클릭

홈페이지

ICON클릭

npm install --save @ant-design/icons 이걸 복사 해주세요

이제 터미널에서 ctrl+c 누르고 y 누르고 엔터해서 npm start 를 빠져나올께요

그다음 복사한것을 붙여 넣고 엔터

그럼 설치과 완료 됬습니다. 그럼 다시 사이트가서 아이콘 아무거나 클릭해봅시다

그럼 이렇게 자동으로 복사가 됩니다.

그걸 src/App.js return 내부에 붙여 넣고 거기 나온 태그이름을 복사합시다

import { 태그이름 } from "@ant-design/icons";

 

그러고나서 저기 {} 사이에 복사한 태그이름을 붙여넣어주세요 그리고 다 복사해서

import 모인곳에 붙여 넣어주세요

이런식으로 됬다면 성공 npm  start로 창을 열어줄게요

이렇게 적용이 제대로 된것을 확인할수 있습니다.

오늘 여기까지 antdsign에 대해서 알아봤습니다