state prev

State란 React 컴포넌트에서 데이터를 담기 위한 상자!! 라고 했었다.

이 상자에 담긴 내용들은 함수가 모두 끝나게 되면 재랜더링을 하게 되는데 State를 이해하기 위해 카운터를 한번 세봤다!

function handleClick() {
   setCount(count + 1)      // 현재 count는 0 + 1 => 1을 상자에 담는다.
   setCount(count + 1)      // 1 이 상자에 담겼지만 여전히 count는 0 이므로 1이 상자에 담긴다
   setCount(count + 1)      // ...
   setCount(count + 1)      // ...
   setCount(count + 1)      // 같은 방식으로 최종적으로 1이 상자에 담겨 화면에 1이 반영된다
}

이런 식으로 count를 5개씩 증가시켜주기 위해 위에 코드를 작성하면 의도한대로 count 값이 5개씩 증가가 될까?

→ 위와 같은 로직이면 count가 하나씩만 증가되게 된다. 5개씩 증가시키도록 할려면 prev 라는 임시저장 공간을 사용하여 작성해야한다. 어떻게? ⬇️

function handleClick() {
   setCount((prev)=>prev+1)     // 임시저장공간의 0(기본값, prev) + 1 => 1을 상자에 담는다.
   setCount((prev)=>prev+1)     // 임시저장공간에 담긴 1(prev) + 1 => 2를 상자에 담는다.
   setCount((prev)=>prev+1)     // ...
   setCount((prev)=>prev+1)     // ...
   setCount((prev)=>prev+1)     // 같은 방식으로 최종적으로 5가 상자에 담겨 화면에 5가 반영된다
}

이렇게 prev를 사용하게 된다면 임시 저장공간에 있는 값을 먼저 꺼내오고, if 임시 저장공간에 있는 값이 없다면 기본 값을 불러오게 된다.

prev를 사용하게 되면 우리가 의도한대로 화면에 반영함과 동시에, 코드를 리팩토링 하는데도 효율적이기 떄문에 잘 활용해주면 좋을 것이다!

prev 사용해서 modal (ant-design) 리팩토링

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

export default function ModalCustomPage() {
  const [isModalVisible, setIsModalVisible] = useState(false);

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

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

  return (
    <>
      <Button onClick={onToggleModal}>Open Modal</Button>

      {/* 모달 삭제하고 새로 만드는 방법 */}
      {isModalVisible && (
        <Modal visible={true} onOk={onToggleModal} onCancel={onToggleModal}>
          <DaumPostcode onComplete={handleComplete} />
        </Modal>
      )}

      {/* 모달 숨겼다가 나타나게 하는 방법
        <Modal visible={true} onOk={handleOk} onCancel={handleCancel}>
          <DaumPostcode onComplete={handleComplete} />
        </Modal>
      */}
    </>
  );
}