코드캠프 12일차

모달

알림창 띄우기

import { Modal } from "antd";

  const onClickSuccess = () => {
    Modal.success({
      content: "게시물 등록에 성공했습니다.",
    });
  };

  const onClickFail = () => {
    Modal.error({ content: "게시물 등록에 실패했습니다." });
  };

모달창 띄우기

    const handleCancel=()=>{
        setIsModalVisible(false)
    }

주소검색

일반적으로 우리가 알고있는 library 속성과 다르기때문에 잘 찾아서 해야한다. props 참고해서 사용하기!

import { useState } from "react";
import { Modal, Button } from "antd";
import DaumPostcode from "react-daum-postcode";

const ModalBasicPage = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const handleComplete = (data: any) => {
    console.log(data);
  };

  return (
    <>
      <Button onClick={showModal}>우편번호 검색</Button>
      <Modal visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <DaumPostcode onComplete={handleComplete} />
      </Modal>
    </>
  );
};

export default ModalBasicPage;

주소창을 열고 닫는 두 가지 방법

visiable로 display를 변경해주는 방법

이 방법은 모달창 안의 내용을 그저 숨김처리 해주는 것이기 때문에 내부컨텐츠에는 변경이 없다.
때문에 수정 중인 내용이 그대로 보여지고 입력이 완료된 후 다시 열었을 경우 내부 컨텐츠가 보여지지 않는다.

조건부 렌더링으로 visiable을 변경해주는 방법

이 방법은 모달창 자체에 visiable을 변경해주어 모달 창이 닫히고 새로 열어줄 경우 새로운 데이터의 모달창을 열어주어 새로운 값을 입력해줄 수 있도록 한다.

두 방법은 isvisiable의 boolean값으로 창을 열고 닫아주는 방법으로 비슷해보일 수 있으나 데이터의 초기화 여부에 따라 달라지니 모달창의 종류에 따라서 적절한 방법을 사용해주면 좋겠다.

state&prev

버그와 에러의 차이!
에러: 실행 중에 실행이 멈추는 것
버그: 실행은 되지만 원하는대로 실행되지 않는 것

state 사용 시 예상치못한 버그가 발생할 수 있다. 이런 경우 prev를 사용하면 좋다.

setState((prev)=>prev+1)

state-prev를 사용하여 비효율적인 코드를 리팩토링 해줄 수 있다.