react-modal

react-modal

설치

$> npm install --save react-modal
# 또는 yarn add react-modal

npm 링크

react-modal

용례

모달 띄우기

import Modal from 'react-modal';

const testPage = () => {
    return (
        <Modal isOpen = {true}>
            Hello World!
        </Modal>
    );
}

코드를 실행시키고 해당 페이지를 렌더링해 보면 모달 창이 렌더링된 것을 볼 수 있다

<Modal></Modal> 내부에 다른 컴포넌트를 넣거나, 여러 태그를 조합하여 렌더링할 수 있다

모달이 하나의 컨테이너라고 생각하면 된다

버튼으로 모달 껐다 켰다 하기

import Modal from 'react-modal';

const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  const handleOnClick = e => {
    e.preventDefault();
    setIsOpen(isOpen ? false : true);
  };
  return (
    <>
      <Modal isOpen={isOpen}>
        <button onClick={handleOnClick}>모달창 끄기</button>
      </Modal>
      <button onClick={handleOnClick}>모달창 켜기</button>
    </>
  );
};

isOpen 이라는 상태값을 이용해서 모달창의 렌더링 여부를 결정한다

Modal 컴포넌트는 isOpen 속성이 true인지 false인지에 따라 렌더링 여부가 변경된다

버튼과 함수를 이용해서 해당 특성을 껐다 켰다 해줄 수 있다

장점

• 굳이 모달창을 직접 구현하지 않아도 빠르게 사용 가능하다
• 모달 창에 띄울 다른 컴포넌트들은 <Modal> </Modal> 태그 안에 넣어주기만 하면 돼서 편리하다

직접 구현해서 사용할 수도 있겠으나 이미 만들어진 라이브러리를 잘 사용하는것도 시간절약에 큰 도움이 되지 않을까