[TIL #31] react-modal

모달 사용하는 부분이 있어, react-modal을 이용하였다

설치

$ npm install react-modal
$ yarn add react-modal

사용법

import Modal from 'react-modal';

isOpen={true} / isOpen{false} 로 모달창의 켜짐과 꺼짐을 담당하는 속성으로 state를 이용하여 관리하면 쉽게 on,off 되는 모달창 구현 가능하다.

function App() {
  return (
    <Modal isOpen={true}>
      모달입니다.
    </Modal>
  )
}

이렇게 스타일 적용하면! 모달이 만들어진다

const Overlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
`;

모달창도 있고 편리한 리액트..