📌소개

강의링크 바로가기

📌배운내용 정리

Modal

Link to Chakra Modal

import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
} from '@chakra-ui/react'

function BasicUsage() {
  const { isOpen, onOpen, onClose } = useDisclosure() 💖💖💖
  // isOpen 은 modal 창이 열려있는지 닫혀있는지를 Ture or False 로 반환합니다. 
// onOpen 는 modal 창을 여는 함수입니다. 
// onClose 는 modal 창을 닫는 함수입니다. 
  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button> 
      // Button 을 클릭하면 아래의 Modal 창이 뜹니다. 💖

      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay /> // ModalOverlay 는 모달창 주변을 약간 어둡게 하여 모달창을 돋보이게 만듭니다. 
        <ModalContent>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalCloseButton /> // 말 그대로.. 모달 창 닫기 버튼입니다... 말잇못... ㅋㅋ 대박!
          <ModalBody>
            <Lorem count={2} />
          </ModalBody>

          <ModalFooter>
            <Button colorScheme='blue' mr={3} onClick={onClose}>
              // Button 을 클릭하면 Modal 창 닫기. 💖
              Close
            </Button>
            <Button variant='ghost'>Secondary Action</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  )
}

isOpen, onOpen, onClose 그리고 useDisclosure()

onOpen 은 Modal 창을 띄우는 기능을 담고 있습니다.
onClose 는 Modal 창을 닫는 기능을 담고 있습니다.
isOpen 는 Modal 이 열려있는지 여부를 담고 있습니다.

<Button onClick={onOpen}>Open Modal</Button>
// 버튼을 보면 onClick 속성에 Modal 창을 띄우는 onOpen 함수가 배정되어 있는 것을 볼 수 있습니다.

<Button colorScheme='blue' mr={3} onClick={onClose}>
// 마찬가지로 위 버튼을 보면  onClick 속성에 Modal 창을 닫는 onClose 함수가 있습니다.

Modal 은 useDisclosure() 사용하면 편리하게 이용할 수 있습니다. 😋

Modal 2

// 하나의 화면에 Modal 창이 2개 이상 사용될 경우 
// const { isOpen, onOpen, onClose } = useDisclosure() 중복문제가 발생한다.
// 예를들어 로그인_Modal 창과 회원가입_Modal 창이 하나의 화면에 존재한다고 가정할 경우
// isOpen, onOpen, onClose 는 어떤 Modal 창에 대한 것인지 컴퓨터는 이해할 수 없다. 
// 이런 경우는 아래와 같이 isOpen, onOpen, onClose 각 변수를 renaming 해줘야한다.

export default function Header() {
  const {
    // 로그인 모달 창에 관한 변수
    isOpen: isLoginOpen,
    onClose: onLoginClose,
    onOpen: onLoginOpen,
  } = useDisclosure();
  const {
    // 회원가입 모달 창에 관한 변수
    isOpen: isSignUpOpen,
    onClose: onSignUpClose,
    onOpen: onSignUpOpen,
  } = useDisclosure();
  return (
    <HStack
      justifyContent={"space-between"}
      py={5}
      px={10}
      borderBottomWidth={1}
    >
      <Box color="red.500">
        <Link to={"/"}>
          <FaAirbnb size={"48"} />
        </Link>
      </Box>
      <HStack spacing={2}>
        <IconButton
          variant={"ghost"}
          aria-label="Toggle dark mode"
          icon={<FaMoon />}
        />
        {/* onClick={onOpen} 기능을 이용해서 버튼을 클릭하면 모달창이 열리게 구현하였습니다. */}
        <Button onClick={onLoginOpen}>Log in</Button>
        <Button onClick={onSignUpOpen} colorScheme={"red"}>
          Sign up
        </Button>
      </HStack>
		{/* onClick={onOpen} 모달 창에 관한 props 를 넘겨주는 과정입니다. */}
      <LoginModal isOpen={isLoginOpen} onClose={onLoginClose} />
      <SignUpModal isOpen={isSignUpOpen} onClose={onSignUpClose} />
    </HStack>
  );
}

📌Grab a Keyword

const { isOpen, onClose, onOpen } = useDisclosure();

Modal

📌Grab a pocket