Reactstrap 에서는 여러 기능을 제공합니다. 오늘은 그 중 Carousel, Collapse, Fade, Form에 대해 알아보겠습니다.
예제를 통해 사용하는 방법을 익혀봅시다!
1. Carousel
: 컨텐츠를 옆으로 넘기는 기능
- carousel 패키지에는 슬라이드를 일정 시간 단위로 자동으로 회전시키는 기능을 제공합니다.
import React from 'react';
import ReactstrapCarousel from './R041_ReactstrapCarousel'
import 'bootstrap/dist/css/bootstrap.css'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<ReactstrapCarousel/>
</div>
);
}
export default App;App.js
import React, { Component } from 'react';
import { UncontrolledCarousel } from 'reactstrap';
const items = [
{
src: 'https://images.pexels.com/photos/14825208/pexels-photo-14825208.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
altText: ' 슬라이드1 이미지 대체 문구',
caption: ' 슬라이드1 설명',
header: ' 슬라이드1 제목'
},
{
src: 'https://images.pexels.com/photos/14825208/pexels-photo-14825208.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
altText: ' 슬라이드2 이미지 대체 문구',
caption: ' 슬라이드2 설명',
header: ' 슬라이드2 제목'
},
{
src: 'https://images.pexels.com/photos/14825208/pexels-photo-14825208.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
altText: ' 슬라이드3 이미지 대체 문구',
caption: ' 슬라이드3 설명',
header: ' 슬라이드3 제목'
}
];
class R041_ReactstrapCarousel extends Component {
render() {
return (
<UncontrolledCarousel items={items} />
)}
}
export default R041_ReactstrapCarousel;R041_ReactstrapCarousel.js
reactstrap 패키지에서 사용할 기능을 {} 안에 나열합니다. 현재는 UncontrolledCarousel, 자동 캐러셀 기능을 사용합니다.
*UncontrolledCarousel
- 태그나 함수를 생략해도 기본 기능을 제공해줍니다. 그래서 기본 기능만 사용한다면, Carousel을 사용하는 것보다 편리합니다.
- 사용할 데이터는 배열로 만듭니다.
| src | 슬라이드 이미지 |
| altText | 이미지 대체 문구 |
| header | 슬라이드 제목 |
| caption | header 하단의 슬라이드 설명 |
- <UncontrolledCarousel> 태그에 배열 형태의 데이터를 넣어주면, reactstrap이 Carousel 기능에 필요한 <html> 태그를 그려주고 css와 function을 적용합니다.
- 한 슬라이드에 머무는 기본 시간은 5초이며, 웹 브라우저의 가로 너비가 특정 값보다 작으면, 슬라이드 제목과 설명 부분이 표시되지 않을 수도 있습니다.
2. Collapse
: 특정 영역을 펼치고 숨기는 기능
- Collapse 패키지에서 이 기능을 제공하며, 버튼 이벤트로 펼치고 숨기는 기능을 제어합니다.
* show(), hide() 함수와 collapse의 차이점
: 전체가 바로 뜨고, 숨겨지는 show, hide와 달리 collapse는 상단부터 점차적으로 펼쳐지고 하단부터 숨겨집니다.
import React from 'react';
import ReactstrapCollapse from './R042_ReactstrapCollapse'
import 'bootstrap/dist/css/bootstrap.css'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<ReactstrapCollapse/>
</div>
);
}
export default App;App.js
import React, { Component } from 'react';
import { UncontrolledCollapse, Button, CardBody, Card } from 'reactstrap';
class R042_ReactstrapCollapse extends Component {
render(){
return(
<div>
<Button color="warning" id="toggle">
펼치기/접기
</Button>
<UncontrolledCollapse toggler="#toggle">
<Card>
<CardBody>
REACT 200
</CardBody>
</Card>
</UncontrolledCollapse>
</div>
)
}
}
export default R042_ReactstrapCollapse;R042_ReactstrapCollapse.js
reactstrap 패키지의 UncontrolledCollapse, Button, CardBody, Card를 사용해 구현해봅니다.
Carousel과 마찬가지로 UncontrolledCollapse는 태그나 함수의 생략이 가능합니다.
*Uncontrolled Collapse
- toggler 속성의 #을 사용하면 toggle 함수를 호출하는 id 값을 지정할 수 있습니다. 현재는 #toggle이므로 id값은 toggle 입니다.
- id가 토글인 버튼을 클릭하면 UncontrolledCollapse 패키지에 내부적으로 선언된 toggle 함수(펼치기/숨기기)를 실행합니다.
- <UncontrolledCollapse> 태그 안에 화면에 표시할 내용을 작성합니다.
3. Fade
: 특정 영역을 서서히 나타내고 숨기는 기능
- Fade 패키지에서 이 기능을 제공하며, 버튼 이벤트로 기능을 제어할 수 있습니다.
import React from 'react';
import ReactstrapFade from './R043_ReactstrapFade'
import 'bootstrap/dist/css/bootstrap.css'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<ReactstrapFade/>
</div>
);
}
export default App;App.js
import React, { Component } from 'react';
import { Button, Fade } from 'reactstrap';
class R043_ReactstrapFade extends Component {
constructor(props){
super(props);
this.state = { fadeInOut: true }
}
toggle = (e) => {
this.setState({ fadeInOut: !this.state.fadeInOut })
}
render(){
return(
<div>
<Button color="success" onClick={this.toggle}>Fade In/Out</Button>
<Fade in={this.state.fadeInOut} tag="h1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</Fade>
</div>
)
}
}
export default R043_ReactstrapFade;R043_ReactstrapFade.js
reactstrap에서 Button, Fade을 사용합니다.
*Fade
<Fade> 태그 영역의 표시 상태는 state로 선언할 수 있습니다.
- in 속성: ture -> 표시 / false -> 미표시
이 코드에서는 초깃값이 fadeInOut: ture 이므로 최초 화면 로딩 시 <Fade> 태그 영역이 표시됩니다.
toggle 함수는 'fadeInOut: !this.state.fadeInOut' 속성을 이용하여 fadeInOut 값을 현재 상태의 반대로 할당합니다.
버튼을 클릭하면 toggle 함수가 실행되고, toggle 함수에서 setState() 함수가 실행되면 render() 함수가 한 번 더 실행되어 변경된 fadeInOut 값이 적용되는 것입니다.
4. Form
Form 패키지를 이용하면 기존 <html form> 태그에 깔끔하고 정리된 스타일을 간편하게 적용할 수 있습니다.
import React from 'react';
import ReactstrapForm from './R044_ReactstrapForm'
import 'bootstrap/dist/css/bootstrap.css'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<ReactstrapForm/>
</div>
);
}
export default App;App.js
import React, { Component } from 'react';
import { Form, Label, Input, Row, Col, FormGroup } from 'reactstrap';
class R044_ReactstrapForm extends Component {
render() {
return (
<Form>
<Label for= "exampleGender">gender</Label>
<Input type="select" bsSize="sm">
<option>no select</option>
<option>woman</option>
<option>man</option>
</Input>
<Row form>
<Col md={6}>
<FormGroup>
<Label for="exampleAddress">address</Label>
<Input type="text" name="address" id="address"/>
</FormGroup>
</Col>
<Col md={4}>
<FormGroup>
<Label for="exampleMobile">mobile</Label>
<Input type="text" name="mobile" id="mobile"/>
</FormGroup>
</Col>
<Col md={2}>
<FormGroup>
<Label for="exampleAge">age</Label>
<Input type="text" name="age" id="age" />
</FormGroup>
</Col>
</Row>
</Form>
)}
}
export default R044_ReactstrapForm;R044_ReactstrapForm.js
reactstrap에서 Form, Label, Input, Row, Col, FormGroup을 사용합니다.
*Form
- <Form>: 사용할 영역을 하나의 폼 단위로 묶어줍니다.
- <Label>: 폼 요소를 설명하는 문자열을 추가합니다.
- <Input> 속성
1. type: select - <option> 태그 중 하나를 선택하도록 합니다.
2. bsSize - 태그의 크기를 정합니다. (sm / lg)
- <Row>: 줄 단위로 태그를 묶어줍니다.
- <Col>: Row 태그로 묶인 영역의 크기를 지정합니다. md 속성으로 너비 값을 지정할 수 있는데, 한 줄은 12개의 영역으로 나뉩니다. 즉 md 속성의 합은 12가 되어야합니다.
- <FormGroup>: 비슷한 용도의 태그들을 <div> 태그로 감싸줍니다.
5. Input Group
: 여러 개의 태그를 하나의 input 그룹으로 묶어 사용하는 기능
-- <InputGroupAddon> 태그는 react strap에서 삭제된 기능입니다.
import React from 'react';
import InputGroup from './R045_ReactstrapInputGroup'
import 'bootstrap/dist/css/bootstrap.css'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<InputGroup/>
</div>
);
}
export default App;import React, { Component } from 'react';
import { InputGroup, InputGroupAddon, InputGroupText, Input, Button } from 'reactstrap';
class R045_ReactstrapInputGroup extends Component {
render(){
return(
<>
<InputGroup>
<Input placeholder="userid" />
<InputGroupAddon addonType="append">
<InputGroupText>@reactmail.com</InputGroupText>
</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<Button>버튼</Button>
</InputGroupAddon>
<Input />
</InputGroup>
</>
)
}
}
export default R045_ReactstrapInputGroup;R045_ReactstrapInputGroup.js
6. Jumbotron
: 대형 전광판 기능
-- 부트스트랩5 에서 제거된 기능입니다.
import React from 'react';
import ReactstrapCarousel from './R046_ReactstrapJumbotron'
import 'bootstrap/dist/css/bootstrap.css'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<Jumbotron/>
</div>
);
}
export default App;import React, { Component } from 'react';
import { Jumbotron, Button } from 'reactstrap';
class R046_ReactstrapJumbotron extends Component {
render(){
return(
<>
<Jumbotron style={{backgroundColor: "#D38C7C"}}>
<h1 className="display-4">REACT 200</h1>
<p className="h4">Contrary to popular belief,
Lorem Ipsum is not simply random text.</p>
<hr className="my-2" />
<p>There are many variations of passages of
Lorem Ipsum available.</p>
<p className="lead">
<Button color="danger">Go Detail</Button>
</p>
</Jumbotron>
</>
)
}
}
export default R046_ReactstrapJumbotron;R046_ReactstrapJumbotron.js
'프론트엔드' 카테고리의 다른 글
| [React] 라우팅(Routing)이란? / react-router-dom / header, footer / 홈페이지 만들기 / react img / require 문법 (0) | 2023.05.03 |
|---|---|
| [CSS] 선택자, 주요 속성 정리(flex, grid, font-size, color, margin, padding, position) (0) | 2023.03.28 |
| [HTML] html class 속성과 id 속성의 차이점 (0) | 2023.03.27 |
| [HTML] HTML 태그 정리(div, span, img, input, a) (0) | 2023.03.27 |
| [HTML] HTML, DOM이란? (Hypertext Markup Language, DOM) (0) | 2023.03.27 |
