2021.11.12일 기록
034. reactstrap Alerts 사용하기
035. reactstrap Badge 사용하기
036. reactstrap Breadcrumbs 사용하기
037. reactstrap Button Dropdown 사용하기
038. reactstrap Button Group 사용하기
039. reactstrap Bottons 사용하기
040. reactstrap Card 사용하기
041. reactstrap Carousel 사용하기
042. reactstrap Collapse 사용하기
043. reactstrap Fade 사용하기
044. reactstrap Form 사용하기
bootstrap은 프론트엔드 디자인을 쉽게 구현할 수 있도록 도와주는 html,css,js프레임워크이다.
bootstrap을 react에서 사용할 수 있도록 패키지로 만든 것이 'reactstrap'이다.
cmd창을 열어 client 폴더 경로로 이동한다.
[npm install -save reactstrap]을 입력하여 reactstrap을 설치한다.
034. reactstrap Alerts 사용하기
Alert 패키지는 알림 영역에 대한 기능을 제공한다.
bootstrap.css를 임포트 해 <reactstap>태그를 사용할 때 bootstrap css가 적용딜 수 있도록 한다.
reactstrap 패키지에 사용할 기능을 { ... } 안에 나열하여 사용한다. 기본 알림 Alert와 삭제 기능이 추가된 알림 UncontrolledAlert를 사용하기 위해 두가지를 함께 임포트해준다.
기본 알림 영역 alert를 구현하여 간순 알림 내용을 표시 시켜준다.
삭제 가능한 알림 영역인 UncontrolledAlert를 구현하여 x버튼을 누르면 알림 영역이 삭제된다.
035. reactstrap Badge 사용하기
Badge 패키지는 부모 요소에 추가로 특정 문자열이나 숫자를 표시할 때 사용된다.
Badge와 Button을 {}안에 선언하여 reactstrap을 임포트해 사용한다.
텍스트 옆에 배지를 추가하여 사용할 수 있다. 예를 들어 쇼핑몰 웹 사이트의 상품 옆에 신상품(new)표시나 히트(Hit),세일상품(Sale)과 같은 배지로 사용할 수 있다.
버튼 안에 배지를 추가하여 사용할 수 있다. 이는 접속자나 메시지 수와 같은 어떤 속성의 수치를 나타낼 때 사용하면 편리하다.
pil 속성을 추가하면 테두리를 둥글게 적용할 수 있다.
href속성을 추가해 배지에 링크를 연결할 수 있다.
036. reactstrap Breadcrumbs 사용하기
Breadcrumbs 패키지는 페이지 위치 경로를 지정한 웹 내비게이션에 사용된다. 보통 웹사이트 상단에 표시되는 메뉴 리스트에 사용하며 특정 메뉴를 선택하면 해당 페이지에 위치로 이동시킨디ㅏ.
Breadcrumb와 BreadcrunbItem을 사용하기위해 reactstrap에 임포트하여 선언한다.
<nav>,<div>태그를 생성한다. bootstrap코드로는 함축적으로 표현돼 있지만, 개발자 도구에서 elements를 확인해보면 html의 <nav>,<div>태그가 생성된것을 확인해 볼 수 있다.
<a>태그를 생성하고 href속성 값으로 이동할 링크의 주소를 넣는다. 예제와 같인 top,bottom이라는 태그의 id값을 사용하거나 'http://example.com'같은 웹사이트 링크로도 사용할 수있다.
037. reactstrap Button Dropdown 사용하기
Dropdown 패키지는 대표 메뉴를 클릭하면, 하위 메뉴 리스트가 표시되는 기능이다. 이때 대표메뉴를 누를 때마다 하위 메뉴 리스트를 번갈아가며 표시/미표시를 해야한다. 이를 위해서는 현재 하위 메뉴 리스트 상태가 표시인지 미표시인지에 대한 정보가 필요하다.
ButtonDroupdowm, DropdownToggle,DropdownManu,DropdownItem을 사용하기 위해 reactstrap에 선언하여 사용해준다.
17줄에 isOpen의 값이 true인 경우에 하위메뉴가 표시/ false이면 미표시가 된다. 8줄에 dropdownOpen의 초깃값을 false로 저장한다.
17줄 버튼 영역을 선택할 경우 toggle함수가 실행되면서 이때 하위 메뉴 표시 상태 값을 반대로
(ture > false // false > ture)로 만들어준다.
헤더 영영에는 하위 메뉴 리스트에 대한 대표정보를 적용 할수있다.
disabled속성으로 버튼을 비활성화할 수 있다.
<a>태그로 감싸게 되면 버튼을 클릭했을때 원하는 url로 이동시킬 수 있다.
onClick이벤트로 버튼을 감쌀 경우 alert()와 같은 함수를 실행시킬 수 있다.
038. reactstrap Button Group 사용하기
Button Group 패키지는 비슷한 형태와 기능을 하는 버튼들을 그룹으로 관리할 수 있게 지원해준다.
Button,ButtonGroup을 사용하기 위해 reactstrap 임포트 선언을 해준다.
비슷한 기능을 하는 버튼을 <ButtonGroup>태그로 묶어서 사용한다.
ButtonGroup안에는 총 3개의 버튼이 존재하는데 이중 Middle은 별다른 기능을 하지않고 오른쪽 왼쪽 버튼을 클릭할 시 +1 과 -1을 하는 기능을 넣어준다. 7줄을 통해서 number의 초깃값을 10을로 지정해주고 각 버튼을 클릭할 경우 move함수 이벤트를 호출시켜 해당하는 type에 대한 값 변경을 실행한다. 이는 setState함수를 사용하여 클릭되는 순간 state변경과 동시에 render()함수를 실행시켜 곧바로 적용되도록 한다.
039. reactstrap Bottons 사용하기
Bottons패키지는 <Button>태그의 color 속성에 약속된 문자열을 넣으면 용도에 맞는 버튼 스타일을 지원해준다.
color 속성에 약속된 문자열을 넣게되면 각각 다른 색의 버튼이 화면에 표시된다.
040. reactstrap Card 사용하기
Card 패키지는 이미지 제목, 부제목, 내용, 버튼 등을 한 세트로 묶는다. Card 단위로 리스트를 만들어 반복해서 출력하면 정형화된 콘텐츠 목록을 만들 수 있다.
Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle, Buttom을 선언한다.
<Card>태그로 하위 태그들을 묶어준다. <CardImg>태그는 <img>태그와 같이 이미지 크기와 url을 지정할 수 있다.
<CardBody>태그로 Card의 제목 부제목 내용 버튼 태그를 묶어서 이미지 하단에 나타나게 해준다.
(이미지 url변경으로 안나옴 ㅠㅠ)
041. reactstrap Carousel 사용하기
Carousel 패키지는 슬라이드를 자동으로 회전시키는 기능을 제공한다. 이미지 텍스트, 버튼 등으로 이뤄진 슬라이드를 일정 시간 단위로 다음 슬라이드로 이동시킨다.
UncontrolledCarousel을 사용하기 위해 선언한다.
UncontrolledCarousel은 태그나 함수를 생략해도 되는 기본 기능을 제공한다. 그래서 기본적인 기능만 사용할 것이라면 Carousel보다는 UncontrolledCarousel 사용하는 것이 더욱 간편하다.
UncontrolledCarousel슬라이드에서 사용할 데이터를 배열로 만들어준다.
src는 슬라이드 이미지
altText는 슬라이드 이미지가 없을 경우 대체 문구
header는 슬라이드 제곰
caption은 header하단에 표시되는 슬라이드 설명
<UncontrolledCarousel>태그에 배열 형태의 데이터를 넣어주면, reactstrap이 Carousel기능에 필요한 <html>태그를 그려주고 스타일과 이벤트를 적용한다.
한 슬라이드가 머무는 시간은 기본값으로 5초가 적용된다.
양쪽 화살표 선택 또는 아래 바 선택하면 슬라이드가 이동하는 것을 확인해 볼 수 있다.
042. reactstrap Collapse 사용하기
Collapse 패키지는 특정 영역을 펼치고 숨기는 기능을 제공한다. 버튼 이벤트로 펼치고 숨기는 기능을 제어할 수 있다. 상단부터 점차적으로 펼쳐지고 하단부터 숨겨진다는 것이 show()와 hide()함수의 차이점이다.
UncontrolledCollapse ,Button,CardBody,Card을 사용하기 위해 선언한다.
UncontrolledCollapse 는 함수나 태그를 생략해도 되는 기능을 제공해준다. 그래서 기본적인 기능만 사용할 것이라면 Collapse보다는 UncontrolledCollapse을 사용하는 것이 더욱 간편하다.
9줄에서 toggler 속성을 #을 이용하여 toggle함수를 호출하여 id값(toggle)을 지정하였다. 버튼을 클릭하면 패키지에 내부적으로 선언되어 있는 toggle함수(펼치기/숨기기)를 실핸하게 된다.
043. reactstrap Fade 사용하기
Fade패키지는 특정영역을 서서히 나타내고 숨기는 기능을 제공한다. 기능을 버튼 이벤트로 제어할 수 있다.
<Fade>태그 영역의 표시 상태를 state로 선언하고 초깃값은 표시인 ture로 설정해주었다.
18줄 버튼을 클릭하게 될 경우 onClick함수 실행으로 toggle의 state값이 ture에서 false로 변경되어 화면에서 숨겨지게 된다.
<Fade>태그는 in속성이 ture이면 표시 false면 미표시된다.
044. reactstrap Form 사용하기
Form 패키지를 이용하면 기존 <html form>태그에 깔끔하고 정리된 스타일을 간편하게 적용할 수 있다.
Form,Label,Input,Row,Col,FormGroup을 사용하기 위해 선언하다.
<Form>태그를 이용해 하나의 폼 단위로 사용할 영역을 묶어서 이용한다.
<Label>태그로 폼 요소를 설명하는 문자열을 추가할 수 있다.
input유형을 select로 입력해 <option>태그 중 하나를 선택할 수 있다. 이때 bsSize 속성으로 태그의 크기를 정할 수 있다. sm대신에 lg를 사용하면 큰 그기의 선택박스를 사용가능.
<Row>태그는 줄 단위로 태그들을 묶어서 사용할 수 있게 해준다 <Col>태그는 <Row>태그로 묶인 영역들이 각각 어느정도의 영역을 차지할 지 정해준다. <Col>태그의 md속성으로 너비 값을 설정할 수 있는데 한줄을 12개의 영역으로 나누어서 설정해야한다.
즉, <Row>태그안에 있는 <Col>태그의 md속성이 합 12가 되어야 한다.
'javascript > React' 카테고리의 다른 글
| react-router-dom URL로 페이지 접근하기 (0) | 2023.02.10 |
|---|---|
| React 200제(45~55번 실습) (0) | 2021.11.15 |
| React 200제(29~33번 실습) (0) | 2021.11.10 |
| React 200제(17~23번 실습) (0) | 2021.11.04 |
| React 200제(9~16번 실습) (0) | 2021.11.01 |