[리액트 React] 실무에서 유용하게 사용되는 reactstrap Collapse

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 reactstrap, 그 중에서도 Collapse에 대해 다뤄볼게요!

지금부터는 문어체로 작성하겠습니다.

 

 

✋🏼 잠깐만! 이 글을 보기 전에, reactstrap 설치는 했나요?

아니라면 해당 링크를 눌러 reactstrap을 설치하기

[리액트 React] reactstrap 사용하는 법 / reactstrap 실무에서 사용하는 기능 공유

 

 

  collapse?

• 펼치고 접는 기능.
•  show()와 hide()랑 다른 것은 애니메이션처럼 스르륵 펼쳐지고 접히는 걸 볼 수 있다.
• 영어 사전엔 collapse의 뜻이 '무너지다'로 되어 있던데, 한번 무너졌다가(접혔다가) 다시 생성 되어져서(펼쳐져서) 이렇게 부르나..? 하고 예측해본다.

1. App.js 작성하기

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.css';
import Collapse from './Collapse';

function App() {
	return(
		<div>
			<Collapse />
		</div>
	)
}

export default App;

 

 

2-1. 클래스형 컴포넌트 Collapse.js 작성하기

import React, { Component } from 'react';
import { UncontrolledCollapse, Button, CardBody, Card } from 'reactstrap';

class Collapse extends Component {
    render() {
        return (
            <div className="d-flex flex-column">
                <Button color="warning" id="toggle">
                    펼치기/접기
                </Button>
                <UncontrolledCollapse toggler="#toggle" className="m-0 p-0">
                    <Card>
                        <CardBody>
                            리액트 나도 할 수 있다! 뚝딱~!
                        </CardBody>
                    </Card>
                </UncontrolledCollapse>
            </div>
        )
    }
}

export default Collapse;

 

 

2-2. 함수형 컴포넌트 Collapse.js 작성하기

import React from 'react';
import { UncontrolledCollapse, Button, CardBody, Card } from 'reactstrap';

function Collapse() {
    return (
        <div className="d-flex flex-column">
            <Button color="warning" id="toggle">
                펼치기/접기
            </Button>
            <UncontrolledCollapse toggler="#toggle" className="m-0 p-0">
                <Card>
                    <CardBody>
                        리액트 나도 할 수 있다! 뚝딱~!
                    </CardBody>
                </Card>
            </UncontrolledCollapse>
        </div>
    )
}

export default Collapse;

 

 

3. 브라우저 확인

toggle 기능으로 '펼치기/접기' 버튼을 만들었다.

 

 

4. 출처 및 추가 내용

해당 링크를 들어가면 reactstrap Collapse의 다양한 예제를 확인할 수 있다.

reactstrap - Collapse