리액트에서 부트스트랩을 사용하는 방법은 import로 불러와서 컴포넌트를 사용한다.
그래서 기존의 부트스트랩과는 사용 방법도 다른만큼 어느정도의 기능의 차이도 있을 거라고 생각한다.
나는 부트스트랩에 대해서 잘 모르기 때문에 답답해서 어떤 기능이 있나 한 번 찾아봤다.
공식 홈페이지의 문서를 참조해서 그냥 이런게 있다 라는 것만 적어봤다.
레이 아웃
문서 내에서 컴포넌트로 분류되지는 않지만 부트스트랩은 레이아웃 기능을 제공합니다.
이 레이아웃은 반응형 flexbox로 만들어졌습니다.
Container ->
width에 반응형을 준 컨테이너 레이아웃을 사용할 수 있습니다.
가운데로 정렬된 수평의 컨텐츠를 보여주는 데 용이합니다.
Fluid Container ->
가로의 해상도에 상관없이 항상 100%의 width를 가집니다.
1000px -> 750px -> 650px같이 딱딱 줄어드는 Container와는 다르게 부드럽습니다.
컴포넌트
Alerts ->
피드백 메시지를 띄울 때 사용하면 좋습니다. 색깔 별로 세팅도 가능합니다.
Arcodion ->
Card 구성요소를 한 번에 하나씩만 열도록 제한하는 방법을 제공합니다.
Badges ->
상대적인 글꼴 크기 및 em 단위를 사용하여 부모 요소의 크기에 맞춰 크기를 조정합니다. Pill을 사용해 좀 더 둥글게 만들 수 있습니다. 모양새는 버튼과 비슷합니다.
Buttons & Button Group ->
버튼과 버튼의 그룹에 관한 세트를 제공합니다. 문서의 양이 방대하기 때문에 꼭 따로 읽어볼 걸 당부합니다.
Cards ->
다양한 변형 및 옵션이 있는 유연하고 확장 가능한 콘텐츠 컨테이너를 제공합니다. Img, Body, Title, Text 같은 계층적 구조를 가지고 있습니다.
Carousels ->
슬라이드 기능을 제공합니다. 이때 컨텐츠의 크기는 자동으로 조정되지 않기에 별도의 정규화 작업이 필요합니다.
Close Button ->
닫기 버튼에 관한 세트를 제공합니다.
Dropdowns ->
드롭다운 기능을 제공합니다.
Figure ->
선택적 캡션이 있는 이미지와 같은 콘텐츠를 표시할 때 유용합니다. Imgae와 Caption으로 구성되어 있습니다.
Forms ->
Form에 관련한 아주 많은 디자인과 기능을 제공합니다. Buttons 마찬가지로 문서의 양이 방대하니 별도로 읽어보길 바랍니다.
InputGroup ->
인풋창에 대한 세트를 제공합니다.
Images ->
이미지에 관한 세트를 제공합니다. Shape와 Fluid 기능을 제공합니다.
List Groups ->
유연하고 강력한 리스트를 제공합니다. Active – 활성화 Disable – 비활성화 Action – 액션 활성화 Flush – 선 없애고 아이템 사이의 구분선만 남김 Horizontal – 수평으로 나열
Modal ->
모달에 관한 세트를 제공합니다.
Navs ->
링크에 관한 리스트를 나열할 때 유용합니다. Tab이나 Pills 같은 스타일도 지원합니다. NavDropdown로 드랍다운처럼 사용할 수도 있습니다.
Navbars ->
유연하고 강력한 네비게이션 바를 제공합니다. Toggle 기능, 브랜드 표시, 색깔 변경, 위치 지정, 스크롤 기능을 지원합니다.
Overlay ->
버튼을 활성화시켰을 때 작은 말풍선 등의 정보를 띄우고 싶은 경우에 사용하면 좋을 것 같습니다.
Pagination ->
페이지네이션에 관한 기능과 스타일을 제공합니다.
Playholder ->
컨텐츠가 로딩 중일 때 로딩 효과를 주고 싶을 때 사용하면 좋습니다.
Progress bars ->
다운로드 표시 등의 진행 상황을 나타내는 게이지를 나타내고 싶을 때 사용하면 좋습니다. 그 외에 게이지를 나타내고 싶을 때 언제든 사용해도 됩니다.
Spinners ->
뭔가 로딩되고 있을 때 사용하면 좋습니다. 빙글빙글 돌아가는 도돌이표를 보여줍니다.
Tables ->
테이블에 관한 세트를 제공합니다.
Tabs ->
탭에 관한 여러 세트를 제공합니다.
Toasts ->
가볍고 쉬운 알림 메시지를 제공합니다.
'프로그래밍 > REACT' 카테고리의 다른 글
React로 카페 만들기 프로젝트 (3) (0) | 2021.10.30 |
---|---|
REACT로 카페 만들기 프로젝트 (2) (0) | 2021.10.04 |
REACT로 카페 만들기 프로젝트 (1) (0) | 2021.09.24 |
댓글