부트스트랩을 사용하면 css를 따로 주지 않아도 간편하게 작업할 수 있습니다.
하지만 부트스트랩을 사용하기 위해서 몇가지 준비 작업이 필요합니다.
Javascript와 비슷하지만 조금은 달라서 부트스트랩 설치부터 많이 접하는 에러 해결 방법에 대해 알려드리고자 합니다!
부트스트랩 설치
홈페이지를 참고하여 부트스트랩을 설치합니다.
https://react-bootstrap.github.io/getting-started/introduction/
1. npm으로 설치
npm install react-bootstrap bootstrapnpm으로 설치시 import 'bootstrap/dist/css/bootstrap.css'; 를 추가해야 합니다.
2. CDN 설치
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>index.html의 태그 안에 CDN을 추가해줍니다.
CDN은 홈페이지에서 최신버전을 확인 후 사용하기!!
부트스트랩 사용
1. 홈페이지에서 원하는 Component import 후 사용하기
https://react-bootstrap.github.io/components/alerts/
2. class에 추가하기
Javascript 의 경우에는 class 옆에 써주면 되지만 React의 경우 className 옆에 써줘야 합니다.
예시)
<div className="ml-1"><div/>위 코드의 경우 해당 div의 마진 왼쪽값을 1rem( font-size가 16px이면, 16px) 크기만큼 주겠다 라는 의미 입니다.
React에서 부트스트랩을 사용하면서 가장 많이 겪게 되는 상황
그러면 여러 개를 함께 쓰고 싶을 땐 어떻게 하나요?
className 에 한개씩 띄어서 작성해주면 됩니다.
예시)
<div className="ml-1 mr-1 d-flex"><div/>사용하다가 보면 이런 문제가 생길수도 있습니다.
그러면 기존에 들어가 있던 css와 부트스트랩을 사용해서 쓸 수 있나요?
네! 사용할 수 있습니다. 제가 사용했던 방법을 알려드리겠습니다.
<div className="ml-1"><div/>import testStyle from '../css/test.mopdule.css';
<div className={testStyle.testDiv}><div/>이런 두개의 코드가 있다고 가정한 후, 두개를 합치면
import testStyle from '../css/test.mopdule.css';
<div className={`ml-1 ${testStyle.testDiv}`}><div/> 이런식으로 합칠 수 있습니다.
{}사이에 백틱 ``을 넣어준뒤 부트스트랩은 그냥 넣어주고
따로 import 해준 CSS는 ${} 사이에 작성한 뒤, 띄어서 넣어주면 됩니다.
class로 지정한 CSS를 여러 개 적용할 수 있습니다.
import testStyle from '../css/test.mopdule.css';
<div className={`ml-1 mr-1 ${testStyle.testDiv} ${testStyle.testDiv2}`}><div/> 하지만 섞어쓰는 경우, 가독성이 떨어지며
팀원들과 함께 작업하는 경우 문제가 생길 수 있습니다!!
알려준대로 했는데 에러가 발생해요!
가장 큰 이유는 클래스 이름이 카멜케이스가 아니여서 발생합니다.
React에서 CSS 적용시 클래스 이름이 카멜케이스 방식이 아닌 test-div, test_div 로 작성할 시 에러가 발생하게 됩니다.
이러한 부분들을 수정한다면 손쉽게 React에서도 부트스트랩을 사용하실 수 있을 겁니다!
위 게시물에 출처와 내용에 문제가 있거나 잘못된 부분이 있다면 알려주세요!