React 200제(45~55번 실습)

2021.11.14일 기록

 

045. reactstrap Input Group 사용하기

046. reactstrap Jumbotron 사용하기

047. reactstrap List Group 사용하기

048. reactstrap Modal 사용하기

049. reactstrap Navbar사용하기

050. reactstrap Pagination 사용하기

051. reactstrap Popovers사용하기

052. reactstrap Progress 사용하기

053. reactstrap Spinner 사용하기

054. reactstrap Table 사용하기

055. reactstrap Tab 사용하기

 

045. reactstrap Input Group 사용하기

Input Group 패키지는 여러개의 태그를 하나의 input 그룹으로 묶어 사용할 수 있도록 지원한다.

 

InputGroup,InputGroupAddon,InputGroupText,Input,Button을 사용하기 위해 선언한다.

 

<InputGroup>태그로 <input>태그와 고정 텍스트 영역(@reactmail.com)을 묶어서 사용한다.

<InputGroupAddon>태그의 addonType속성 값을 append로 하면 <input>태그의 오른쪽에 표시하기 적합한 스타일이 적용된다. prepend는 왼쪽에 표시하기 적합한 스타일이 적용된다.

 

046. reactstrap Jumbotron 사용하기

Jumbotron은 대형 전광판을 의미한다. 넓은 영역에 눈에 띄게 정보를 표시해 사용자의 관심을 불러일으킬 수 있다.

Jumbotron,Button을 사용하기 위해 선언한다.

<Jumbotron>태그로 하위 태그들을 묶어주면, 넓은 영역을 차지하는 <div>태그가 생성된다.

 

 

047. reactstrap List Group 사용하기

List Gorup 패키지는 정돈된 스타일의 목록을 표시할 때 사용한다. <ListGroup>과<ListGroupItem>태그는 html에서 목록을 만드는 태그인 <ul><li>로 변환된다.

 

ListGroup,ListGroupItem,Badge을 사용하기 위해 선언한다.

 

목록으로 사용할 것들을 <ListGroup>태그로 묶어준다.

<ListGroupItem>태그로 목록에 각 요소들을 추가한다. disabled를 추가하면 비활성화할 수 있다.

 

048. reactstrap Modal 사용하기

Modal 패키지는 alert()함수와 마찬가지로 사용자게에 원하는 시점에 알림창을 뛰어 필요한 내용을 보여준다. Modal은 alert()함수와는 달리 웹 브라우저에서 팝업창을 차단할 수 없고 배경 페이지와 어울리는 디자인으로 변경하여 적용할 수 있다.

Button,Modal,ModalHeader,ModalBody,ModalFooter을 사용하기 위해 선언해준다.

 

버튼을 클릭할 경우 모달이 나오게 함으로 Modal의 팝업 표시 상태를 state변수에 선언하고 초깃값으로 false(미표시)를 할당한다. 버튼을 누르게 될 경우 toggle()함수가 실행되고 팝업 표시 상태를 현재와 반대로 할당한다.

 

팝업창으로 표시할 영역을 <Modal>태그로 묶고 그안에 <ModalHeader> 와 <ModalBody> ,<ModalFooter>를 작성해서 넣어준다.

 

isOpen 속성이 true이면 표시 /false면 미표시로 버튼에 따른 팝업 표시 상태로 결정된다. fade 속성을 true로 할 경우 서서히 표시할 수 있다. toggle 속성에 입력된 toggle함수는 팝업이외의 역역을 클릭했을 때 실행된다.

 

049. reactstrap Navbar사용하기

Navbar 패키지는 웹사이트의 내부 페이지들로 쉽게 이동할 수 있는 메뉴 리스트와 링크를 제공한다.

Collapse,Navbar,NavbarToggler,NavbarBrand,Nav,NavItem,NavLink를 사용하기 위해 선언한다.

 

Navbar 리스트의 표시 상태를 state 변수로 선언하고 초깃값으로 미표시(false)를 할당한다.

 

전체 내비게이션 영역을 <Navbar>태그로 묶어준다.

<NavbarBrand>태그는 내비게이션에서 무조건 표시되는 영역이다.

<NavbarToggler>태그는 화면 오른쪽에 표시되는 버튼으로 클릭스 toggle함수가 실행된다.

<Collapse>태그에서 isOpen의 속성이 ture일경우 표시, false일 경우 미표시된다.

 

Nav안에 표시할 메뉴 리스트는 <NavItem>태그 안에 NavLink,메뉴명,링크를 추가할 수 있다.

 

 

050. reactstrap Pagination 사용하기

데이터 수가많아 한 페이지에 모두 표시할 수 없을 경우 여러 페이지로 나눠 표시한다. Pagination 패키지는 페이지 번호, 이전/다음페이지, 첫/마지막페이지 버튼을 쉽게 구현할 수 있게 해준다.

Pagination,PaginationItem,PaginationLink를 사용하기 위해 선언한다.

페이지 버튼을 클릭했을때 파라미터에 따라 알림창을 표시한다.

 

<Pagination>태그로 전체 페에징에 사용할 영역을 묶어준다. <PaginationItem>태그 단위로 각각의 버튼을 구분해준다. <PaginationLink>태그로 버튼에 표시될 텍스트를 감싼다. 이때 텍스트를 감싸는 대신 속성값 (first,previous,next,last)을 추가하여 값을 표현할 수 있다.

 

 

051. reactstrap Popovers 사용하기

Popover 패키지는 html요소를 클릭했을 때 요소에 연결된 메시지 박스를 띄울 수 있는 기능을 제공한다. toolrip과 거의 동일하게 동작한다.

Button,UncontrolledPopover,PopoverHeader,PopoverBody를 사용하기 위해 선언한다.

 

<Button>태그의 id값을 <UncontrolledPopover>태그의 target 속성값과 동일하게 해주면, 버튼을 눌렀을때 <UncontrolledPopover>태그 영역이 나타난다. 버튼을 누를 때마다 태그 영역의 표시상태가 반대로 바뀐다.

 

placement는 요소를 기준으로 메시지 박스가 표시되는 위치 속성이다. top(위) bottom(아래) right(오른쪽) left(왼쪽)

<UncontrolledPopover>태그 안에서 <PopoverHeader>태그로 헤더 영역에 제목을 입력할 수있다.

<PopoverBody>태그는 메시지 내용을 표시할 수 있다.

 

 

 

 

052. reactstrap Progress 사용하기

Progress 패키지는 전체 작업에 대한 현재 진행상태를 표현해준다. 진행 바 내부에 무자열을 넣을 수 있도 색상도 적용할 수 있다.

 

Progress를 사용하기 위해 선언한다.

 

10줄에 componentDidMount()가 실행되면서 progress()함수가 실행된다.

setTimeout()함수가 0.1초마다 실행되는데 진행 상태에 대한 값을 progress을 1씩 증가시켜서 setState()함수로 즉각적으로 변경하여 보여준다.

 

setState()함수가 실행될때마다 render()함수가 실행 / 이때 {this.state.progrss}값이 1씩 증가하기 때문에 진행바가 0%에서 100%까지 채워지는것을 볼 수있다.

 

여러개의 바를 사용할때는 <Progress multi> 태그로 묶어서 사용해준다.

<Progress>태그의 속성은 진행바 형태(bar,animated,striped), 색상(color),진행률(value)가 있다.

 

 

053. reactstrap Spinner 사용하기

Spinner 패키지는 어떤 작업이 진행되고 있음을 표시하는, 움직이는 원 형태의 디자인을 제공한다. 색상, 너비, 높이 값을 지정할 수 있다.

Spinner를 사용하기 위해 선언해준다.

<Spinner>태그의 기본은 선으로 동그라미가 원을 그리며 돌고있는 디자인이다.

<Spinner>태그에 type 속성을 grow로 추가하면 원이 중앙에서 점점 커디다가 사라지는 디자인이 적용된다.

<Spinner>태그에 size속성 추가할 수 있다. 기본크기보다 작게 표시하려면 sm을 입력한다.

style을 통해서 원하는 크기를 설정할 수 있다.

 

 

054. reactstrap Table 사용하기

Table패키지는 <html table>태그에 간편하게 스타일을 적용할 수 있도록 지우너해준다.

테이블 색상, 가로줄, 세로줄, 크기, hover, striped 속성을 지정할 수 있다.

 

Table을 사용하기 위해 선언한다.

속성이 추가되지 않은 테이블은 기본적으로 흰색 배경에 가로줄만 있다.

color명을 그대로 입력하여 테이블에 전체 색상을 변경할 수 있다 (bark)

bordered속성으로 세로줄을 생성할 수 있다.

striped 속성으로 짝수행에만 음영을 줄 수 있다.

hover속성은 마우스 커서가 위치한 행에 음영을 주고 마우스 커서가 벗어나면 음영을 제거해준다.

borderless속성은 가로줄/세로줄 모두 제거한다.

size속성을 sm으로하면 테이블의 크기가 작아진다.

 

055. reactstrap Tab 사용하기

 Tab 패키지는 사용자 동작에 따라 특정 영역에 다른 내용을 표시할 때 사용한다. 클릭 이벤트로 원하는 영역을 표시해야할 경우 간편하게 사용할수 있다.

 TabContnet,TabPane,Nav,NavItem,NavLink를 사용하기 위해서 선언한다.

 

표시할 tab영역의 id를 상태변수로 선언한다. 초깃값으로 첫번째 탭의 tabid인 React로 할당한다.

내비게이션 메뉴를 선택하면 toggle함수가 실행되는데, 파라미터로 표시할 tab영역의 tabid값을 넘긴다.

파라미터로 넘어온 값(tabnum)이 현재 tabid의 상태값과 다르다면 변경된 값으로 수정해준다.