모달 + useDisclosure

Chakra에서 모달을 만들어 띄우기 위해 useDisclosure 훅을 사용한다.

useDisclosure는 isOpen, onOpen, onClose를 반환한다.

 

[Modal]

• ChakraUI에서 Modal컴포넌트를 이용해 Modal만듬
• props(isOpen, onClose)를 명시해야 함
• children 컴포넌트들과 함께 사용됨
  • Modal > ModalComponent > ModalHeader, ModalBody, ModalFooter
  • ModalOverlay: 모달 띄워지면 주위 어둡게
  • ModalCloseButton: 모달 닫기 버튼 > onClose함수 실행되는 구조

<Modal isOpen={isOpen} onClose={onClose}>
	<ModalOverlay /> // 모달 실행시 어둡게
        
    <ModalContent>
    
      <ModalHeader>        
        <ModalCloseButton />
      </ModalHeader>

      <ModalBody></ModalBody>
      
      <ModalFooter></ModalFooter>
      
    </ModalContent>
</Modal>

 

 

[useDisclosure]

• isOpen: 열릴 모달 실행
• onOpen: 모달 버튼 클릭시 isOpen 함수 실행
• onClose: 모달을 닫히게 함

import { useDisclosure } from "@chakra-ui/react";

import LoginModal from "./LoginModal";
import SignupModal from "./SignupModal";

export default function Header () {
  const {isOpen, onClose, onOpen} = useDisclosure(); // hook 선언

	return (
    <Box>
      <Button onClick={onOpen}>Login</Button> // 클릭시 onOpen함수 실행

      // onOpen함수 실행되면 isOpen함수가 실행되면서 모달 실행
      // onClose함수도 실행될 수 있도록 조치
      <Modal isOpen={isOpen} onClose={onClose}> 
        //모달 내용.....
      </Modal>
    </Box>