• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

prevState를 사용하여 리팩토링

23.04.08 15:04 작성 23.04.12 11:15 수정 조회수 1k

0

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를 사용하는 것이 암묵적인 원칙인가요?

 

답변 1

답변을 작성해보세요.

1

Camp_멘토님의 프로필

Camp_멘토

2023.04.10

안녕하세요 박혜주님
두 코드에는 차이가 있습니다
setIsModalOpen((prev)=>!prev)의 경우
이전 상태값을 참조하여 다음 상태값을 결정하는 것으로 상태 업데이트 도중 다른 업데이트가 동시에 일어나도 이전 상태값을 참조해 적용할 수 있어 상대적으로 안전합니다
반면 setIsModalOpen(!prev)의 경우 이전 상태값을 참조하지 않고 바로 !prev로 설정하는 것이기에 예기치 않은 에러가 발생했을 경우 찾아내기 힘들게 됩니다

박혜주님의 프로필

박혜주

질문자

2023.04.10

감사합니다^^