[React] 모달창 예시 코드, 모달창 띄우기, 팝업창 띄우기

사용방법

사용 할 때에는 만들 모달 컴포넌트를 원하는 위치에 붙이면 됨

ex) <ChangeProfileModal></ChangeProfileModal>

npm install styled-components

주석 버전

// import
import Box from '@mui/material/Box';
import Modal from '@mui/material/Modal';

// 모달 박스 스타일 객체
const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
};

// 모달 컴포넌트
function ModalComponent() {
	// 모달 창 열기&닫기 state
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    return (
        <>
        // 클릭 전 보여줄 내용 작성(클릭 시 open state를 true로 변경하여 모달 창을 연다)
            <div onClick={handleOpen} />마 눌러봐라</div>
			
            
            // 여기서부터 모달 창
            /* 모달 전 내용을 클릭 했을 때 open state가 true로 바뀌어
            Modal의 open Props로 true 값이 전달된다 이에 모달창이 열린다*/
            
            <Modal open={open} onClose={handleClose}>
            	//박스의 style 을 변경하여 모달 창의 크기 등 스타일을 변경한다
                //(위 style 객체에 있는 값들이 모달창의 스타일로 적용됨)
                <Box sx={style}>
					//Box 안에 모달 창에 들어갈 내용을 적는다
                    <div>모달 창 테스트!</div>
                </Box>
            </Modal>
        </>
    );
};

 

주석 제거 버전

import Box from '@mui/material/Box';
import Modal from '@mui/material/Modal';

const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
};

function ModalComponent() {
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    return (
        <>
            <div onClick={handleOpen}>마 눌러봐라</div>
            <Modal open={open} onClose={handleClose}>
                <Box sx={style}>
                    <div>모달 창 테스트!</div>
                </Box>
            </Modal>
        </>
    );
};

 

모달 박스 styled-components 버전

import React from "react";
import Box from "@mui/material/Box";
import Modal from "@mui/material/Modal";
import styled from "styled-components";

const AddArticle = () => {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  return (
      <>
        <button onClick={handleOpen}>글쓰기</button>
        <Modal open={open} onClose={handleClose}>
          <StyledModalBox>
            <div>모달 창 테스트!</div>
          </StyledModalBox>
        </Modal>
      </>
  );
};

const StyledModalBox = styled(Box)`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  background-color: white;
  border-radius: 15px;
`;

export default AddArticle;

 

 

모달 open 시 포커스로 인한 outline css 적용을 해제하고 싶다면?(styledComponents 기준)

아래 코드를 Modal 과 StyledModalBox 에 적용한다.

  &:focus-visible {
    outline: 0px;
  }