modal

알림창을 내 맘대로 바꾸는것

모달 내부에 입력창 넣어보기

우편번호 모달 만들기

사용할 내용은
주소검색 npm
해당 내용을 사용할것

페이지의 내용을 사용해서

많이 본 모습이 나옴

그런데 주소를 선택하면

console.log(data)로 찍은 내용

내용은 나오는데

이런식으로 비어있는 모달이 남음
주소선택시 모달창도 닫히도록 해보자

주소 검색의 complete시에 setIsOpen도 false로 들어가서 닫히도록 하면 된다.

그런데 이번엔 모달을 사용해서 주소 검색후 잘 닫히는데
다시한번 모달을 열어보면

빈 창이 나온다

이는 위의 코드는 모달창이 버튼을 누를때마다 새롭게 열리는게 아니라
모달페이지는 계속 있고
isOpen의 True,false에 맞춰서 보였다 안보였다 하는것뿐이다.
그래서 작업을 완료하면 비어있는 모달이 가려져있기만 할뿐인것.

모달을 여닫는 2가지 방식

1. 모달을 숨기는 방식 = 위에서 만든 방식
2. 모달을 삭제했다가 열었다가 하는 방식
   주소검색의 경우는 아래의 방법을 사용해야한다.

{isOpen && (
  <Modal title="모달 제목" open={isOpen} onOk={handleOk} onCancel={handleCancel}>
  <DaumPostcodeEmbed onComplete={handleComplete}  />
    </Modal>
)}

간단하게 isOpen && 으로 감싸주면된다.
이렇게 되면
isOpen값이 false가 되면 모달 자체를 만들지 않게되어서 True가 될 때마다 새롭게 만들게 된다.