2. 날씨앱 만들기 (8)

 

WeatherButton라는 컴포넌트를 만들기 위해서는 ...

몇가지 추가해주어야 한다.

 

 

엔터치면

이게 나온다..

 

버튼을 일일이 <button>~~~</button>으로 만들 수 있지만 

일일이 만들기에는 귀찮!!!!

 

여기서...

리액트 부트스트랩 사용!!

 

html,css에서 사용한 것(그대로 들고오면) 안된다!

리액트 전용 부트스트랩이 따로 있다...!

 

왜냐하면 리액트는 모든것을 컴포넌트화 시킨다. 그래서 리액트 부트스트랩에서도 버튼을 컴포넌트화 시켜서 제공한다. 

그래서 여기서는 리액트 부트스트랩을 가져올 것임!!

 

https://react-bootstrap.netlify.app/

React Bootstrap | React Bootstrap

 

복사해서 설치한다!

 

 

서버를 종료해서 설치한다 - ctrl + c

 

 

 

 

css를 가져다 쓰면 내가 디자인을 할 필요가 없어!!

 

 

버튼들이 알아서 디자인이 잘 되어있다~

내가 일일이 css를 작성하지 않아도 여기 있는거 쓰면 적용이 된다!!

 

나는 빨강색을 좋아하니까~~ㅋㅋㅋ

 

 

주의!!

여기까지 하고 terminal에서 npm start를 하면

이런 오류가 난다!

꼭 App.js에서 import를 시켜준 후 npm start 명령어 실행하기!!