[to-do-app] React react-bootstrap으로 모달 창 생성

https://yeomss.tistory.com/211?category=976597 

[to-do-app] React 할 일 추가 기능

이전 글은 위에 링크로 달아놓겠습니다.

해당 시리즈를 확인하고 싶으시다면 아래 태그란에 [react-to-do-app] 을 클릭해주세요.

---

 

 

 ModalView 

import React from "react";
import { useSelector } from "react-redux";

import "../styles/input.css";
import InputForm from "../components/input/InputForm";
import Alarm from "../components/common/Alarm";

const InputView = () => {
	const isOpen = useSelector((state) => state.todo.isOpenModal);

	return (
		<>
			<InputForm />
			<Alarm isOpen={isOpen} />
		</>
	);
};

export default InputView;

InputView 에 모달을 달아둡니다.

만약 input 폼에 아무것도 입력하지 않고 엔터키를 누르면 해당 모달이 뜹니다.

이번에는 react-bootstrap 을 사용하여 모달 기능을 사용해보도록 하겠습니다.

 

 

 react-bootstrap 설치 

<!-- bootstrap -->
<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
    crossorigin="anonymous"
/>
<script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"
></script>

public/index.html 에 해당 태그를 붙여넣어줍니다.

npm i react-bootstrap

해당 명령어를 사용하여 react-bootstrap 을 설치합니다.

 

 

 모달 창 만들기 

import React, { useCallback } from "react";
import { useDispatch } from "react-redux";
import { Modal, Button } from "react-bootstrap";
import todoSlice from "../../reducers/todo";

const Alarm = ({ isOpen }) => {
	const dispatch = useDispatch();
	const toggleModal = useCallback(() => {
		dispatch(todoSlice.actions.toggleModal());
	}, [dispatch]);

	return (
		<>
			<Modal show={isOpen} onHide={toggleModal}>
				<Modal.Header closeButton>
					<Modal.Title>알림</Modal.Title>
				</Modal.Header>

				<Modal.Body>
					<p>폼에 입력을 해주세요 ✍️</p>
				</Modal.Body>

				<Modal.Footer>
					{/* <Button variant="secondary" onClick={toggleModal}>
						취소
					</Button> */}
					<Button variant="primary" onClick={toggleModal} className="closeModalBtn">
						확인
					</Button>
				</Modal.Footer>
			</Modal>
		</>
	);
};

export default Alarm;

Modal 이라는 react-bootstrap 라이브러리 내에 있는 컴포넌트를 사용하여 모달 창을 만듭니다.

Modal.Title 을 이용해 모달 창 제목을 작성할 수 있습니다.

마찬가지로 Modal.Body 에는 내용을 Modal.Footer 에는 기타 footer 내용을 작성할 수 있습니다.

저는 Footer 에 버튼을 넣도록 하겠습니다.

Button 컴포넌트도 react-bootstrap 안에 있는 것을 사용합니다.

const initialState = {
	isTodoGetting: false,
	data: {
		list: [
			{ isCompleted: false, text: "hi1" },
			{ isCompleted: false, text: "hi2" },
		],
	},
	isOpenModal: false, // 모달창 오픈
};

toggleModal(state, action) {
    state.isOpenModal = !state.isOpenModal;
},

버튼을 클릭하면 toggleModal action 이 실행됩니다.

 

 

 결과 화면 

아무 것도 입력하지 않았을 시 modal 창이 뜹니다.

 

 

 

 

 

 

 

 

 

#리액트 부트스트랩 모달 #react bootstrap modal #react react-bootstrap #모달 창 사용하기 #modal

---