[React] Day 29 - Modal 팝업창 띄우기

방법1. 상태 (State)를 이용하여 활용한 Modal 구현

1. 상태 (State)를 사용하여 Modal의 열림 또는 닫힘 상태를 관리한다.

2. 조건부 렌더링을 통하여 Modal의 표시 여부를 설정한다.

3. Modal 컴포넌트 내부에 필요한 컨텐츠를 포함시킨다.

 

상태 변경 방법

 

setIsOpen(true);

  => modal을 열겠다고 허락해 준 상황.

 

함수 선언 부분에서 

const [isOpen, setIsOpen] = useState(false);

이렇게 상태를 선언해주고, 

return() 부분에서 modal의 열림과 닫힘을 확인하기 위해서 

if (isOpen)

 의 상황이라면 modal의 내용을 띄울 수 있게 설정한다.

 

방법2. 외부 라이브러리 사용

- 'react-modal' 라이브러리 사용

- 외부 라이브러는 modal의 열림, 닫힘 상태 및 스타일링 등을 처리하는 기능을 제공해줌.

 

외부 라이브러리 사용 방법

함수 선언 부분에서 

const [isOpen, setIsOpen] = useState(false);

이렇게 선언하는 것은 위와 동일하다.

외부 라이브러리를 사용한다면, 우선 import문으로 

import Modal from "react-modal";

이렇게 react-modal을 선언해준다.

그리고 return 문에서 출력해주기 위해서

<Modal isOpen={ isOpen } onRequestClose={ closeModal } style={ customStyles }>

  {/* 모달 안에 들어갈 내용 */}

</Modal>

 

이렇게 사용해주면 된다.