React Bootstrap 설치법.

React의 html은 JSX라는 괴상한 문법을 쓰기때문에,

 

일반적인 부트스트랩을 복붙해서 사용할 수 없다.

 

 

React JSX에 일반 bootstrap에서 정의된 class를 사용하려면,

 

복붙한 코드들의 태그에 class를 className으로 바꿔줘야하는 번거로움이있다.

 

 

그래서 그냥 한번에 복붙할 수 있도록 만들어진

 

React 전용 부트스트랩이 있는데 react-bootstrap이다.

 

 

React-Bootstrap · React-Bootstrap Documentation

React-Bootstrap

설치를 위해 여기로 들어간다.

 

npm 또는 yarn으로 설치를 해준다.

 

 

그리고 완벽한 css 적용을 위해 추가로 index.html에

 

이 cdn을 body 태그 위 상단에 첨부해두면된다.

 

저 cdn을 첨부하면 일반 bootstrap의 class도 JSX의 className에 넣어서 사용할 수 있다.

 

 

그럼 설치는 끝났다.

 

 

근데 React는 또 js 파일마다 bootstrap UI를 쓰려면 상단에 쓰고자하는 UI의 태그를 설치된 bootstrap 라이브러리로부터 import 해와야한다.

 

이렇게 중괄호 안에 사용하고자하는 태그를 import해오면된다.

 

출저인 from 뒤 'react-bootsrap'은 우리가 설치한 외부 라이브러리이므로, 경로를 적어줄 필요가없다.