styled-component, useState 사용해서 Modal창 만들기

📌  Modal 창이란?

 

평소에 우리는 "팝업창이 차단되었습니다" 란 메세지를 종종 접한다.

여기서 말하는 팝업창은 현재 위치한 브라우저 이외에 또 다른 브라우저 페이지를 띄운 것을 말한다.

홈페이지에 접속했을 때 광고나 공지 등이 파바박 떠올라서 해당 창을 일일이 닫아줬던 경험이 있을 것이다.

 

그에 반해 기존의 브라우저 위에 하나의 레이어를 까는 것을 말한다. "새로운 창"이 아니다.

팝업창과 달리 브라우저 단에서 차단할 수 없기 때문에 반드시 표시해야하는 정보를 다루기 좋다.

그리고 개인적으로 UI적으로 정리가 잘 된 느낌을 받아서, 앞으로도 애용할 것 같다.

 

 

📌  Modal 창의 장단점 (feat. Pop-up 창의 장단점)

 

그렇다면, Modal 창은 장점만 있나 ?  Nope.

Pop-up 창과 비교해 장단점을 살펴보자.

 

◾  Pop-up 창

 

장점 

✔  한 번 만들어 두면 재사용/ 재활용이 가능하다

✔  페이지별 이동이 자유롭다. ( 사용자를 팝업창에 묶어두지 않음 )

 

단점

✔  팝업창을 닫기위해서는 직접 x 버튼을 눌러야 한다. ( 사용자 경험 측면에서 소모적인 행위임 .. )

✔  브라우저 단에서 팝업창 자체를 차단당할 수 있다. ( 원하는 이벤트가 실행되지 않음 )

 

◾  Modal 창

 

장점

✔  레이어 자체를 브라우저 위에 깔기 때문에, 해당 레이어( 해당 화면 )를 마음껏 디자인할 수 있다.

✔  모달창 자체가 차단당하는 경우는 없다. ( 원하는 흐름을 구현할 수 있음 )

 

단점

✔  모달창을 띄우고 싶은 단계마다 직접 만들어야 한다.

✔  모달창을 닫기 전에는 페이지별 이동이 자유롭지 않다. ( 사용자를 모달창에 묶어 놓음 )

 

 

📌  Modal 창을 구현해보자.

📌  ( styled-component를 사용한 React 구조도 파악해보자. )

어떤식으로 렌더가 되는지 궁금해서 하나하나 찍어보았다.

 

 

01 ModalContainer

 

import { useState } from 'react';
import styled from 'styled-components';

export const ModalContainer = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-flow: row wrep;
  justify-content: center;
  align-items: center;
`;

export const Modal = () => {
  const [isOpen, setIsOpen] = useState(false);

  const openModalHandler = () => {
    setIsOpen(!isOpen);
  };

  return (
    <>
      <ModalContainer>
      </ModalContainer>
    </>
  );
};

 

 

 

02 ModalBtn

 

export const ModalBtn = styled.button`
  background-color: #4000c7;
  text-decoration: none;
  border: none;
  padding: 20px;
  color: white;
  border-radius: 30px;
  cursor: grab;
`;

export const Modal = () => {
  const [isOpen, setIsOpen] = useState(false);

  const openModalHandler = () => {
    setIsOpen(!isOpen);
  };

  return (
    <>
      <ModalContainer>
        <ModalBtn onClick={openModalHandler}>
          {isOpen ? "Opened !" : "Open Modal"}
        </ModalBtn>
      </ModalContainer>
    </>
  );
};

 

 

 

03 ModalBackdrop

 

export const ModalBackdrop = styled.div`
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  flex-flow: row wrep;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
`;

export const Modal = () => {
  const [isOpen, setIsOpen] = useState(false);

  const openModalHandler = () => {
    setIsOpen(!isOpen);
  };

  return (
    <>
      <ModalContainer>
        <ModalBtn onClick={openModalHandler}>
          {isOpen ? "Opened !" : "Open Modal"}
        </ModalBtn>
        {isOpen ? 
        <ModalBackdrop onClick={openModalHandler}>
        </ModalBackdrop> 
        : null}
      </ModalContainer>
    </>
  );
};

 

 

 

04 ModalView

 

export const ModalView = styled.div.attrs(props => ({
  role: 'dialog'
}))`
  text-align: center;
  text-decoration: none;
  padding: 30px 90px;
  background-color: white;
  border-radius: 30px;
  color: #4000c7;
`;

export const Modal = () => {
  const [isOpen, setIsOpen] = useState(false);

  const openModalHandler = () => {
    setIsOpen(!isOpen);
  };

  return (
    <>
      <ModalContainer>
        <ModalBtn onClick={openModalHandler}>
          {isOpen ? "Opened !" : "Open Modal"}
        </ModalBtn>
        {isOpen ? 
        <ModalBackdrop onClick={openModalHandler}>
          <ModalView>
            <div onClick={openModalHandler}>&times;</div>
            <div>Hello World</div>
          </ModalView>
        </ModalBackdrop> 
        : null}
      </ModalContainer>
    </>
  );
};

 

 

 

 

https://styled-components.com/docs