React - 기초③

React-modal 사용하기

modal 컴포넌트를 만들기 위해 여러가지 찾아보았는데, react-modal을 사용하면

편리하다 하여 3편은 모달 만들기로 적어보겠다.

 

먼저, react-modal을 다운받아준다.

npm i react-modal

 

modal 폴더를 만들어주고 modal.js 파일을 생성한다.

상단에 추가해 주고,

import React from 'react';
import ReactModal from 'react-modal';

 

Modal 클래스를 생성해준다.

const Modal = () => {

  return (
    <ReactModal>
      <div>모달 입니다.</div>
    </ReactModal>
  );
};

export default Modal;

 

그리고 modal이 열릴 js 파일에 상단에 추가해주고,

import Modal from './Modal/Modal';

 

랜더링 될 곳에 useState와 modal을 가져온다.

const [isOpen, setOpen] = useState(false);
const handleClick = () => setOpen(true);

<button onClick={handleClick}>모달 열기</button>
<Modal isOpen={isOpen}/>

 

 

여기까지 왔으면 팝업이 열릴것이다.

 

 

※ 문제는 닫치지 않는다.

 

그래서, Modal.js에 버튼을 추가하여 상위 컴포넌트에서 가져온 props를 이용하여 함수를 사용하였고,

const Modal = ({isOpen}) => {

  return (
    <ReactModal isOpen={isOpen}>
      <button onClick={() => {isOpen(false)}}>X</button>
      <div>모달 입니다.</div>
    </ReactModal>
  );
};

 

상위 컴포넌트에도 Modal에 조건문을 추가하였다.

<button onClick={handleClick}>모달 열기</button>
<>
  {isOpen ? <Modal isOpen={setOpen} /> : null}
</>

 

 

이렇게 열렸다 닫치는 Modal 컴포넌트와 분리 성공~!

 

★ modal에 대해 수정하려면 ReactModal에 추가하여 css 수정

className="Modal" overlayClassName="Overlay"

★ 모달 열기 버튼이 아닌 진짜로 열려야 할 버튼에 추가하여 보자!!..

 

 

 

참고

https://nakta.dev/how-to-manage-modals-1

낙타의 블로그 :: 효율적인 modal 관리 with React(1)

https://phrygia.github.io/react/2021-09-21-react-modal/

[react] 모달 팝업창 만들기 (react modal)

그 외 여러가지...