4. [React] BootStrap Modal 이용 (Button 클릭 시 Modal)

안녕하세요. 오늘은 BootStrap을 이용하여 Button을 클릭했을 때 Modal 화면이 뜨게 하는 부분을 공유하고자 합니다.

실행결과

 

※ BootStrap Button 이용 방법 참고

3. [React] BootStrap Button, Modal 이용

3. [React] BootStrap Button 이용

 

※ BootStrap Modal 공식 문서

https://react-bootstrap.netlify.app/components/modal/

React-Bootstrap

 

① (BootStrap 모듈 미 설치 시 ) BootStrap 모듈 설치

npm install react-bootstrap bootstrap

 

② 적용

① MyButton.js 파일 생성

---

② MyButton.js

import React, { useState } from 'react';

import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';

import 'bootstrap/dist/css/bootstrap.min.css';

import './MyButton.css';

function MyButton() {

    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    return(
        <div>
            <Button className="btn" variant="outline-primary" onClick={handleShow}>outline-primary</Button>

            <Modal show={show} onHide={handleClose}>
                <Modal.Header>
                    <Modal.Title>버튼</Modal.Title>
                </Modal.Header>
                <Modal.Body>데이터</Modal.Body>
                <Modal.Footer>
                    <Button className="btn_close" variant="secondary" onClick={handleClose}>
                        닫기
                    </Button>
                </Modal.Footer>
            </Modal>
        </div>
    )
}
export default MyButton;

---

③ App.js

import './App.css';
import MyButton from './MyButton';

function App() {
  return (
    <div className="App">
      <MyButton />
    </div>
  );
}

export default App;

 

④ 실행

npm start

버튼 클릭 전

 

버튼 클릭 후