<TIL> 0720_라이브러리를 이용해 주소검색, 경고창 등 Modal 적용하기

오늘도 어제 배운 내용에 이어서 Merterial과 Ant-Design 등 라이브러리 사이트를 이용해 여러가지 UI Component를 불러와 적용해보는 시간을 가졌다.
지난주에는 정말 어려웠는데 이번주는 그 정도는 아니라서 재밌다.

• 항상 중요한 점은 라이브러리에서 받아온 소스의 값은 해당 소스에 정해져있는 그대로 써야한다. (값은 수정 가능)

1. Modal

• 'alert'으로 알림창을 띄우는 것 보다 깔끔하다.
• 창 안에 사진, 영상, @emotion 등 모두 삽입 가능.
  (pages/libraries3.tsx, quiz/quiz1,2/index 참고)

1. modal창을 여닫을 값을 useState에 담고, 버튼을 클릭했을 때 modal 페이지가 열려야 하니까 기본 값을 false로 준다.
   = const [isOpen, setIsOpen] = useState(false);
2. button을 onClick했을 때 modal페이지가 열리도록 기능 적용.
   (jsx부분은 이미지 참고)
   = function onClickSubmit(){ setIsOpen(true) }
3. button을 onClick했을 때 modal페이지가 닫히도록 기능 적용.
   = function onClose(){ setIsOpen(false) }
   (onOk와 onCancel 둘 다 modal 페이지를 닫는 기능이기 때문에 똑같이 {onClose}를 줌.)
   

---

2. 주소 검색창 (daum-postcode)

• NPM에 daum-postcode검색 후 npm install --save react-daum-postcode 설치

1. 각각 필요한 값을 useState로 담는다.
   
2. button을 onClick했을 때 주소 검색창이 열리도록 기능 적용
   

• function onComplete(data){ 주소 클릭 시 onComplete가 실행되고,(data)안에 사용자가 클릭한 주소의 정보가 담기게 된다.
• setIsOpen(false) = 열린 주소 검색창을 닫는다. (원하는 주소 클릭 시 자동으로 주소 검색 창 닫히도록)
  
• 태그 안의 속성에대한 값이 ={true]일 때는 값을 생략해줘도 정상적으로 보여짐!
  ex) autoClose={true} => autoClose

<daum-postcode의 라이브러리 속성>

• readOnly = 읽기전용으로 바꿔주는 태그. input창이라도 입력이 불가능해짐.

• autoClose = 원하는 주소 클릭 시 주소 검색창 자동으로 닫힘.

• modal창에 넣지 않고 밖에 놓으면 페이지 자체에 보여지고, modal로 감싸면 modal창으로 뜸.
• 안과 밖이 연결된 것 처럼 보이지만 원래 사실 한 페이지인것

• Cancel과 Ok버튼도 각각 onCancel과 onOk에 닫는 속성을 담아주면 닫히는 기능 적용됨.