Step 2 - 애플리케이션 UI 구성
기본적인 UI를 만들기 위해 마음에 드는 이미지 소스를 url로 붙이고
css스타일 을 추가해준다.
컴포넌트는 일단 네가지로 구성한다.
버튼 스타일을 위해 프로젝트 내에서 부트스트랩을 사용해야하는데
컴포넌트 기반인 리액트에서 전용으로 쓰는 부트스트랩이 존재한다.
npm install react-bootstrap bootstrap 명령어로 터미널에서 설치해준다.
버튼 스타일에 적용시키기 위해 내가 만든 버튼 컴포넌트에 먼저
react-bootstrap을 import 시켜준다.
그리고 App 컴포넌트에서도 부트스트랩과 내가 만든 버튼 컴포넌트까지
import를 꼭 해줘야한다.
버튼의 스타일은 컴포넌트별로 부트스트랩 홈페이지에 사용자의 입맛에 맞게끔
사용하라고 다양하게 있으니 원하는 스타일을 가져와 사용하면 된다.
내가 원하는 버튼 스타일이 잘 적용되어진 것을 확인할 수 있다.
날씨 데이터가 보여지는 박스에 css스타일 추가를 위한 클래스 이름을 준다.
css 스타일 추가를 위해 모든 요소를 class로 묶어준다.
묶은 클래스에 요소들의 중앙 배치를 위해 css 스타일을 추가해준다.
기본적인 UI 형태가 갖추어졌다.
개발하는 곰🐻