2022.01.22(Sat.) <React에 BootStrap 사용해 보기>

Bootstrap와 함께라면 css가 무서워서 백엔드를 선택하신 당신도 할 수 있습니다!

1. 문제의 발단

부트캠프 프로그램을 진행하며 페어와 만날 때 아이스 브레이크로 포지션이 어떻게 되냐는 질문을 자주 했다. 몇몇 사람들은 css가 너무 어렵고 디자인도 어떻게 해야 할지 잘 몰라서 백엔드를 지망하는 사람들도 있었다. 아마 처음 css를 배울 때 한번 접근은 쉽지만 파고들면 너무 어렵고 한 번도 해 본 적 없는 디자인에 관련한 것이라서 그렇다고 생각했다. 그렇다면 bootstrap을 이용해 쉽게 접근하고 몇 가지 좋은 결과물을 만들어 보고 접근하면 css에 대한 자신감도 붙고 더 재미있게 공부할 수 있을 것 같다는 생각에 드디어 이 포스팅을 해 보려고 한다.

2. BootStrap?

• 디자인을 도와주는 프레임워크이다. 이미 만들어진 구조를 통해 className을 이용해 적용시키면 그럴듯한 작업물을 얻을 수 있다.
• 심지어 반응형도 만들어 준다!

3. 어떻게 사용하나요?

1. 먼저 bootstrap을 다운로드한다.
   • npm install react-bootstrap bootstrap
2. css파일을 import 한다. 가장 상위의 js파일인 index.js나 App.js에 적용하면 된다.

   • import 'bootstrap/dist/css/bootstrap.min.css';

3. 필요한 컴포넌트를 import 해서 적용시켜 작업할 곳에 사용하면 된다.
   • https://react-bootstrap.github.io/components/alerts/

React-Bootstrap

• 필요한 컴포넌트들을 위 사이트에서 찾아서 사용하면 된다.

• // 이렇게 Button 이라는 컴포넌트를 가져와서 바로 사용하면 된다.
  
  import 'bootstrap/dist/css/bootstrap.min.css';
  import { Button } from "react-bootstrap";
  
  function page() {
  	return (
      	<div>
          	<Button>Hi!</Button>
          </div>
      )
  }

• 위의 사이트에서 예시로 보듯이 variant 속성에 값을 주면 모양을 바꿔가며 사용할 수 있다.

매우 간단하게 적용할 수 있다.
사용하는 것은 좋지만 꼭 직접 css파일에 들어가 보고 어떤 css속성으로 만들어진 것인지를 확인하고 공부하는 것도 중요하다고 생각한다.
그리고 어느 정도 적응이 된다면 직접 만들어 보는 것도 좋은 공부가 될 것이다!
가장 중요한 것은 css의 재미를 모두가 알았으면 좋겠다.