[React] Custom Modal 창 구현하기

오늘은 간단한 커스텀 모달창을 구현하는 방법을 알아보도록 하겠다.

 

1. React 프로젝트를 생성한다.

 

2. 프로젝트 생성후 CustomModal.jsx라는 파일을 만든다

 

3. 다음과 같은 코드를 작성한다. 

import React from 'react';
import styled from 'styled-components';
import { IoClose } from 'react-icons/io5';

const StyledModalContainer = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 1000;
`;
const StyledModalWrap = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800;
  max-width: 100%;
  max-height: 90%;
  overflow-y: auto;
  background-color: white;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid ${(props) => props.theme.colors.mainGray};
  text-align: right;
  cursor: pointer;
`;

const CustomModal = ({ isOpen, closeModal, children }) => {
  return (
    <div style={{ display: isOpen ? 'block' : 'none' }}>
      <StyledModalContainer>
        <StyledModalWrap>
          <IoClose color="#333" size="30px" onClick={closeModal} />
          <div>{children}</div>
        </StyledModalWrap>
      </StyledModalContainer>
    </div>
  );
};

export default CustomModal;

 

4. 다음과 같이 필요한 부분에서 호출한다.

<CustomModal isOpen={isOpen} closeModal={() => setIsOpen(false)}>
        로그인 정보가 틀렸습니다.
</CustomModal>

 

5. 모달창이 뜨는 것을 확인할 수 있다.