인프런 커뮤니티 질문&답변

import { useState } from "react";
import { Modal } from "antd";
import { Address } from "react-daum-postcode/lib/loadPostcode";
import DaumPostcodeEmbed from "react-daum-postcode";

const ModalCustomPage = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const onToggleModal = () => {
    setIsModalOpen((prev) => !prev);
  };

  const handleComplete = (address: Address) => {
    console.log("실행되었습니다.");
    console.log(address);
    onToggleModal();
  };

  return (
    <>
      {isModalOpen && (
        <Modal
          title="모달 제목"
          open={true}
          onOk={onToggleModal}
          onCancel={onToggleModal}
        >
          <DaumPostcodeEmbed onComplete={handleComplete} />
        </Modal>
      )}
    </>
  );
};

export default ModalCustomPage;

안녕하세요, 한 가지 궁금증이 들어 질문합니다.

onToggleModal 함수를 보면 prevState를 사용해서 isOpenModal 값을 바꾸는데 굳이 그럴 필요가 있을까? 라는 생각이 들어서요.

  const onToggleModal = () => {
    setIsModalOpen((!isModalOpen);
  };

onToggleModal 안에서 여러개의 setIsModalOpen이 실행되는 것이 아니기 때문에 그냥 이렇게 코드를 작성해도 함수가 끝나면 isOpenModal 값이 바뀌고 리렌더링되어 버그 없이 잘 실행될 것 같은데 혹시 다른 이유가 있나요?

아님 setState 사용할때 prevState를 사용하는 것이 암묵적인 원칙인가요?