Reactstrap 사용하기
파트가 워낙 많아서 생략하기로 하고, 대신 필요할 때마다 책 혹은 구글에서 찾아서 쓰자.- Alert : 알림영역 기능 제공
- Badge : 부모 요소에 추가로 특정 문자열이나 숫자를 표시할 때 사용
- Breadcrumbs : 페이지 위치 경로를 지정한 웹 네비게이션에 사용. 보통 웹 사이트 상단에 표시되는 메뉴 리스트에 사용하며 특정 메뉴를 선택하면 해당하는 페이지 위치로 이동
- Button Dropdown : 대표 메뉴를 클릭하면, 하위 메뉴 리스트가 표시되는 기능
- Button Group : 비슷한 형태와 기능을 하는 버튼들을 그룹으로 관리할 수 있게 지원
- Button : Button 태그에 color 속성에 약속된 문자열을 넣으면, 용도에 맞는 버튼 스타일을 지원해 줌
- Card : 이미지 제목, 부제목, 내용, 버튼 등을 한 세트로 묶는다. Card 단위로 리스트를 만들어 반복해서 출력하면, 정형화된 콘텐츠 목록을 만들 수 있다.
- Carousel : 슬라이드를 자동으로 회전 시키는 기능을 제공
- Collapse : 특정 영역을 펼치고 숨기는 기능을 제공
- Fade : 특정 영역을 서서히 나타내고 숨기는 기능을 제공
- Form : 기존 html form 태그에 깔끔하고 정리된 스타일을 간편하게 적용해 사용 가능
- Input Group : 여러 개의 태그를 하나의 input 그룹으로 묶어 사용할 수 있도록 지원
- Jumbotron : 넓은 영역에 눈에 띄게 정보를 표시해 사용자의 관심 불러일으킬 수 있다
- List Group : 정돈된 스타일의 목록을 표시할 때 사용. ListGroup과 ListGroupItem은 각각 ul, li로 변환된다.
- Modal : alert() 함수와 마찬가지로 원하는 시점에 알림 창을 띄워 필요한 내용 표시. alert() 와 달리 웹 브라우저에서 팝업 창을 차단할 수 없다.
- Navbar : 웹 사이트의 내부 페이지들로 쉽게 이동할 수 있도록 메뉴 리스트와 링크 제공
- Pagination : 페이지 번호, 이전/다음 페이지, 첫/마지막 페이지 버튼을 쉽게 구현할 수 있게 지원
- Popovers : html 요소를 클릭했을 때 요소에 연결된 메시지 박스를 띄울 수 있는 기능 제공. tooltip과 거의 동일하게 동작
- Progress : 전체 작업에 대한 현재 진행 상태 표현
- Spinner : 어떤 작업이 진행되고 있음을 표시하는, 움직이는 원 형태의 디자인을 제공
- Table : html table 태그에 간편하게 스타일을 적용할 수 있도록 지원
- Tab : 사용자 동작에 따라 특정 영역에 다른 내용을 표시할 때 사용. 클릭 이벤트에 따라 원하는 영역을 표시해야 할 경우 간편하게 사용
[출처 : 초보자를 위한 리액트 200제(정보문화사)]
안녕 :P