[React] 페이지 위에 레이어를 까는 모달 / ModalStrap

팝업, 다이얼로그로 불리는 모달창 ModalStrap

 

 

[ModalStrap.js]

import { useState } from 'react';
import {Button, Modal, ModalHeader, ModalBody, ModalFooter} from 'reactstrap';

function ModalStrap(){
    const [open, setOpen] = useState(false);
    return(
        <div>
            <Button color='danger' onClick={() => setOpen(true)}> 모달 </Button>
            {/* open이 true가 되면 열리는 모달창이고 모달창이 열리면 다시 false로 변경함 */}
            <Modal isOpen={open} toggle={() => setOpen(!open)}>
                <ModalHeader toggle={() => setOpen(!open)}> "국내 통신망 제일 많이 쓰는 구글, 사용료는 '0원'" </ModalHeader>
                <ModalBody>
                구글 등 해외 플랫폼 사업자가 망 사용료를 내도록 하는 규제가 필요하다는 주장이 제기됐다.
                 유튜브 인기 영향으로 구글의 국내 통신망 트래픽 비중은 28.6%(지난해 4분기 기준)인데 납부하는 망 사용료는 0원이다. 
                 국회 과학기술정보방송통신위원회 소속 김병욱 국민의힘 의원은 "구글이 망 사용에 따른 정당한 대가를 내도록 법적인 제재 방안을 조속히 강구해야 한다"고 26일 밝혔다. 
                 과학기술정보통신부에 따르면 지난해 4분기 기준 해외 사업자의 일평균 국내 트래픽 비중 1위는 구글로 28.6%다. 
                 2위인 넷플릭스(5.5%)보다 5배 이상 많다.
                </ModalBody>
                <ModalFooter>
                    <Button  color='primary' onClick={()=>setOpen(!open)}>확인</Button> {' '} {/* 한칸 띄고 싶을 때 사용 */}
                    <Button  color='secondary' onClick={()=>setOpen(!open)}>취소</Button> 
                </ModalFooter>
            </Modal>
        </div>
    )
}

export default ModalStrap;

- 모달창을 띄울 때에는 setOpen을 이용해서 열고 닫는 부분에 대한 코드에 대한 컨트롤이 중요

* 모달 버튼 클릭 시 모달 오픈 : setOpen(true)

* 모달을 닫을 시 : setOpen(false || !open)

 

 

[ModalStrap2.js]

import { useState } from 'react';
import {Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Label, Form, FormGroup} from 'reactstrap';

function ModalStrap2(){
    const [open, setOpen] = useState(false);
    const toggle = () => setOpen(!open); // (2)
    const [fruit, setFruit] = useState('banana');
    const change = (e) => {
        console.log(e.target.value);
        setFruit(e.target.value);
    }
    // 전송 버튼 클릭 시 
    const send = () =>{
        console.log("데이터 전송");
        toggle();
    }
    return(
        <div style={{width:"800px"}}>
           // (1)
            <Form inline onSubmit={(e)=> e.preventDefault()}>
                <FormGroup>
                    <Label>과일 선택</Label>
                    <Input type='select' onChange={change}>
                        <option value="banana">바나나</option>
                        <option value="apple">사과</option>
                        <option value="orange">오렌지</option>
                    </Input>
                </FormGroup>
               
                &nbsp;&nbsp;
                <Button color='primary' onClick={toggle}>전송</Button>
            </Form>
           // (2)
            <Modal isOpen={open} toggle={()=>setOpen(!open)}>
                <ModalHeader toggle={toggle}>
                    전송 여부 확인
                </ModalHeader>
                <ModalBody>
                    {fruit} 선택 <br/> 전송하시겠습니까?
                </ModalBody>
                <ModalFooter>
                    // (3)
                    <Button color='primary' onClick={send}> 전송 </Button>
                    <Button color='secondary' onClick={()=>setOpen(false)}> 취소 </Button>
                </ModalFooter>
            </Modal>
        </div>
    )
}

export default ModalStrap2;

 

(1) Form의 제출을 막기 위한 e.preventDefault()를 사용하여 버튼 컨트롤 진행 (FormStrap 블로깅 참고)

(2) 모달창의 열고 닫음의 기능을 매번 작성하지 않고 const를 이용하여 매칭만 진행

(3) send는 백엔드와의 데이터 전달이기 때문에 추후 작성 예정

 

 

 

[ModalStrap3.js]

모달창 안에 모달창이 존재하는 구조

모달창 열고 닫는 로직에 대한 변환 관계 잘 파악이 필요한 구조이다

import {Button, Modal, ModalHeader, ModalBody, ModalFooter} from 'reactstrap';
import { useState } from 'react';

function ModalStrap3(){
    const [modal, setModal] = useState(false); // 첫 번째 모달
    const [nestedModal, setNestedModal] = useState(false); // 모달 안에 포함된 모달
    const toggle = () => {setModal(!modal)};
    const toggleNested = () => {
        setNestedModal(!nestedModal)
    };
    const toggleAll = () => {
        setNestedModal(false);
        setModal(false);
    };
    return(
        <div style={{width:"800px"}}>
            <Button color="danger" onClick={toggle}> 첫 모달 </Button>
            <Modal isOpen={modal} toggle={toggle}>
                <ModalHeader toggle={toggle}> "국내 통신망 제일 많이 쓰는 구글, 사용료는 '0원'"</ModalHeader>
                <ModalBody>
                구글 등 해외 플랫폼 사업자가 망 사용료를 내도록 하는 규제가 필요하다는 주장이 제기됐다.
                 유튜브 인기 영향으로 구글의 국내 통신망 트래픽 비중은 28.6%(지난해 4분기 기준)인데 납부하는 망 사용료는 0원이다. 
                 국회 과학기술정보방송통신위원회 소속 김병욱 국민의힘 의원은 "구글이 망 사용에 따른 정당한 대가를 내도록 법적인 제재 방안을 조속히 강구해야 한다"고 26일 밝혔다. 
                 과학기술정보통신부에 따르면 지난해 4분기 기준 해외 사업자의 일평균 국내 트래픽 비중 1위는 구글로 28.6%다. 
                 2위인 넷플릭스(5.5%)보다 5배 이상 많다.
                <br/>
                <Button color='success' onClick={toggleNested}>두번째 모달</Button>
                <Modal isOpen={nestedModal} toggle={toggleNested}>
                    <ModalHeader toggle={toggleNested}> " 세상 쓸데 없는 애플 걱정?…아이폰15 韓 초반 흥행 성공"</ModalHeader>
                    <ModalBody>
                        애플 아이폰15 시리즈가 국내에서 전작보다 빠르게 팔려나간 것으로 나타났다.
                        25일 시장조사업체 애틀러스리서치앤컨설팅에 따르면, 아이폰15 시리즈의 첫 주 판매량은 전작인 아이폰14 시리즈의 같은 기간 판매량보다 49.5% 많다.
                        아이폰15 기본형은 전작 대비 137% 넘게 팔리며 가장 큰 폰의 성장세를 보였다.
                    </ModalBody>
                    <ModalFooter>
                    <Button  color='primary' onClick={toggleNested}>닫기</Button> {' '} {/* 한칸 띄고 싶을 때 사용 */}
                    <Button  color='secondary' onClick={toggleAll}>전체 닫기</Button> 
                </ModalFooter>
                    </Modal>
                </ModalBody>
                <ModalFooter>
                    <Button  color='primary' onClick={()=>setModal(!toggle)}>처리</Button> {' '} {/* 한칸 띄고 싶을 때 사용 */}
                    <Button  color='secondary' onClick={()=>setModal(!toggle)}>취소</Button> 
                </ModalFooter>
            </Modal>
        </div>
    )
}

export default ModalStrap3;

- 첫번째 모달의 열고 닫는 부분은 setModal을 이용

- 두번째 모달의 열고 닫는 부분은 setNestedModal을 이용

- 전체 닫기는 위 두개를 모두 false로 설정

 

* 마지막 모달 안에 모달을 여는 과정에서는 모달을 열고 닫는 구조에 대한 이해 관계가 명확해야 하기 때문에 단순히 코드를 복붙 하는 것 보다는 어떤 구조로 이루어져 있는지 확인하는 것이 필요함