REACT_reactstrap Collapse

 Collapse 패키지는 특정 영역을 펼치고 숨기는 기능을 제공한다

버튼 이벤트로 펼치고 숨기는 기능을 제어할 수 있다

상단부터 점차적으로 펼쳐지고 하단부터 숨겨진다는 것이 Show(), Hide() 함수와의 차이점이다.

 

- R042_ReactstrapCollapse.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;

 

 

- App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

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;

 

결과

펼치기/접기 버튼을 클릭하면 펼치기 접기가 된다