안녕하세요 !!!
이번에는 Chakra UI를 이용해서 Modal(모달)을 작성해보려고 합니다 !!
리액트 환경에서 정말 쉽고 간단하게 만들 수 있습니다 !! (state라던가 function하나도 안쓰고 가능합니다 ! )
자 그러면 바로 시작해봅시다 !
그 전에 아직 설치를 하지 않는 분들은 아래 URL에서 확인해서 설치해주세요 ^^
https://heokknkn.tistory.com/51
또한 그 전에 Modal에서 아이콘도 사용할겁니다 !!! 저는 react-icons를 사용할것입니다 !!!
정말 무궁무진하게 icons를 많이 사용할 수 있거든요 ^^
사용 하실분들은 아래 보시구 다운로드 합시다 !!
npm install react-icons --save
Modal 만들기
먼저 저의 기본 화면을 봐주세요 !!
간단하게 밑에처럼만 만들었습니다 !!!
이번 편에서는 Modal에 대해서만 알고 가는거니까 Modal 부분에 대해서만 설명하겠습니다 !!!
Modal 외적인 부분에서 코드에 대해서 궁금하면 댓글 남겨주세요 !!! ( 필요에 따르면 다른 편에서 자세히 쓰겠습니다 ! )
먼저 저는 「Log in」을 누르면 Modal이 표시되게 해놨습니다 !! 그럼 한번 코드를 봐볼까요?
이 부분에 전체적인 코드는 아래 github에서 확인해주세요 !!
이번 코드에서는 중요한 부분에 대해서만 다뤄보겠습니다 !
import { useDisclosure } from "@chakra-ui/react";
import { FaAirbnb, FaMoon, FaUserNinja, FaLock, FaReact } from "react-icons/fa";
export default function Root() {
const { isOpen, onClose, onOpen } = useDisclosure();
return (
<Box>
<HStack
justifyContent={"space-between"}
py={5}
px={10}
borderBottomWidth={1}
>
<Box color="red.500">
<FaReact size={48} />
</Box>
<HStack spacing={2}>
<IconButton
variant={"ghost"}
aria-label="Toggle dark mode"
icon={<FaMoon />}
/>
<Button onClick={onOpen}>Log in</Button>
<Button colorScheme={"red"}>Sign up</Button>
</HStack>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Log In</ModalHeader>
<ModalCloseButton />
<ModalBody>
<VStack>
<InputGroup>
<InputLeftElement
children={
<Box color="gray.500">
<FaUserNinja />
</Box>
}
/>
<Input variant={"filled"} placeholder="Username" />
</InputGroup>
<InputGroup>
<InputLeftElement
children={
<Box color="gray.500">
<FaLock />
</Box>
}
/>
<Input variant={"filled"} placeholder="Password" />
</InputGroup>
<Button mb={4} colorScheme={"red"} w={"100%"}>
Log in
</Button>
</VStack>
</ModalBody>
</ModalContent>
</Modal>
</HStack>
</Box>
);
}이게 끝입니다 !!!
별다른 class나 state, function없이 구현이 가능합니다 !!
정말 쉽지 않나요???? 그러면 여기서 중요한것들에 대해서 배워보겠습니다 !
<Modal>은 기본적으로 Modal을 사용하겠다라는 의미로 Chakra를 사용하면 기본적으로 isOpen이랑 isClose를 써줘서 모달을 열었을 때 닫았을 때를 알려줘야 하죠 !!! 필수입니다 !
그리고 <ModalOverlay>가 나오는데요 ! 이것은 보통 Modal이 뜨면 Modal부분이 하이라이트가 되면서 주위가 어둡게 되는데요 ! 그 효과를 넣기 위해서 입니다 ^^
다음에는 본격적으로 ModalContent가 나오면서 Modal에서 header, body, footer 이런식으로 나눠서 사용가능합니다 !
그래서 Modalheader, ModalBody가 나오죠 !!!
ModalFooter은 보통 모달을 끄거나 할 때 사용하는데 이번에는 사용안합니다 !! 사용하고싶은 분들은 사용해도 괜찮구요 ^^ 요즘 추세가 잘 안써서 ;;;
자 ! 그러면 state, function을 안쓰고 진행한다고 했는데요 !!!
왜 그렇게 되는지 알아봅시다 !
먼저 「Log In」이라는 기본적인 Button이 필요합니다 !!!
바로 이 부분입니다 !!! 40번째 줄입니다 !!!
여기서 「Log In」버튼으로 onOpen으로 Modal을 열어줍니다 !!!
또한 !! 이렇게 ModalCloseButton을 줘서 Modal을 닫는(X) 버튼도 손쉽게 구현 가능합니다 ^^
일단 확인해볼까요???
영상으로도 확인해보세요 !! 애니메이션도 확인이 가능해요 !
그것뿐만 아니라 기본적으로 ModalOverlay로 인해서 주위가 어둡게 되는 부분을 클릭하면 자동적으로 Modal이 닫히는데요 !!! 이 부분을 막을수도 있습니다 !
저런식으로요 ^^ 저 기능이 싫은 분들은 사용해봅시다 !
대단하지 않나요??? 별로 CSS를 쓴것도 없고 그냥 라이브러리 하나 썼을 뿐인데 !!
자 ! 이렇게 해서 Modal 부분이 끝났습니다 !!!
정말 쉽지 않나요?? width, height같은것들이나 색상도 손쉽게 바꿀 수 있습니다 !!!
지금까지 개인적으로는 Modal을 만드는게 tailwind를 사용 할 때보다라던가 리액트에 Modal을 사용하는것보다 더 쉽게 된 것 같습니다 !!! 또한 기본적으로 애니메이션 효과까지 있습니다 !!!!
여러분들도 놀랍다고 생각하시나요???? 저만 그런가요???? ㅎㅎ
자 여기까지 Chakra UI로 Modal을 작성해봤습니다 !!!!
다음에는 다크모드의 사용법을 가지고 오겠습니다 !!
다들 즐겁게 코딩합시다 !!
'IT관련 > CSS 관련' 카테고리의 다른 글
| Tailwind CSS에서 space에 대해서 알아봅시다 ! (0) | 2023.01.17 |
|---|---|
| [Chakra] 차크라 UI로 정말 간단하고 쉽게 다크모드 구현해봅시다 ! (0) | 2022.12.28 |
| [Chakra] css를 간단하게 ! Chakra UI에 대해서 배워봅시다 ! (feat. tailwind css 와 비교) (0) | 2022.12.19 |
| Tailwind css를 이용해서 Dark(다크)모드를 구현해보자 !!! (0) | 2022.04.27 |
| Tailwind css를 이용해서 Responsive(반응형)페이지를 만들어보자 !! (sm, md, lg, xl, 2xl) (0) | 2022.03.10 |
