210914 코드캠프 12일차
모달 (Modal)
- 여태까지 알람창(alert)를 사용해왔는데 모달을 사용하면 예쁘게 띄줄수 있다.
- 모달 기능을 사용하기위해서는
AntD
설치후import
해줘야한다!- 모달
Docs
에서 설정 등을 적용시켜줘야 한다.
모달 적용
📔 비밀번호 모달창 띄우기
- 모달을 쓰기위해 import 해주기
import { Modal, Button } from "antd";
- isModalVisible은 모달이 켜고 꺼지기
- myPassword는 비밀번호 입력을 위한 변수
export default function ModalBasicPage() { const [isModalVisible, setIsModalVisible] = useState(false); const [myPassword, setMypassword] = useState("");
- 모달 창 켜기 끄기 변수
const showModal = () => { setIsModalVisible(true); }; const closeModal = () => { setIsModalVisible(false); };
html
써주기 /visible
은 모달 기능중 하나로true/false
로 창을 띄울지 끌지 정해준다.onCancel
도 기능중 하나! 취소버튼을 누르면 무슨 행동을 할 지 정할 수 있다.return( <> <Button onClick={showModal}>모달창 열기</Button> <Modal visible={isModalVisible} onCancel={closeModal}> 비밀번호 입력: <input type="password" onChange={onChangeMyPassword} /> </Modal> </> )
📔 DaumPostcode 와 Modal 을 이용해서 주소검색하고 입력하기
- 주소를 검색하고 클릭하면
- 주소가 입력된다.
DaumPostcode
와Modal
을 이용하기 위해import
해주기import { useState } from "react"; import DaumPostcode from "react-daum-postcode"; import { Modal } from "antd";
- 우편번호와 주소를 입력하기위한 useState
- isOpen 으로 주소창 모달을 켤지 끌지 정한다.
export default function ModalAddressPrevPage() { const [myZipcode, setMyZipcode] = useState(""); const [myAddress, setMyAddress] = useState(""); const [isOpen, setIsOpen] = useState(false);
- 우편번호, 주소를
data
에 저장시킨다.const handleComplete = (data) => { setMyZipcode(data.zonecode); setMyAddress(data.address); console.log(data.zonecode); console.log(data.address); setIsOpen((prev) => !prev); };
isOpen
을false
로 만들어서 끄게해주는 함수function onTogleZipcode() { setIsOpen((prev) => !prev); }
html
입력- 버튼 클릭시와 취소버튼 누를 시 모달창 끄기
onTogleZipcode
handleComplete
로 주소클릭시 데이터 입력return ( <> <button onClick={onTogleZipcode}>우편번호 검색</button> {isOpen && ( <Modal visible={true} onCancel={onTogleZipcode}> <DaumPostcode onComplete={handleComplete} /> </Modal> )} <div>{myAddress}</div> </> );
Author And Source
이 문제에 관하여(210914 코드캠프 12일차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@as5427072/210914-코드캠프-12일차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)