[React] State prev

✅ setState()

---

• setState() 는 비동기로 작동하며 setState(updater [, callback]) 의 콜백 함수가 실행된 후 리렌더링 된다.

• 한번에 여러개의 state를 사용해도 모든 변화가 완료 된 후에 리렌더링이 되는 성질을 갖는다.

const [count, setCount] = useState(0);

import { useState } from "react";

const StatePrevPage = () => {
  const [count, setCount] = useState(0);

  const onClickCount = () => {
    setCount(count + 1);

    setCount(count + 1);

    setCount(count + 1);

    setCount(count + 1);
  };

  return (
    <div>
      <div>현재카운트: {count}</div>
      <button onClick={onClickCount}>카운트증가</button>
    </div>
  );
};

export default StatePrevPage;

• 카운트는 4씩 증가

• setState에는 자기만의 고유한 임시저장 공간을 가진다.

• setState가 실행될 때 임시저장 공간에 저장하고 그 데이터는 변하지 않고 1만 가지게 되고 함수가 끝나면 화면에 렌더링 된다.

✅ state prev

---

• 임시저장공간에 있는 데이터를 바로 불러오는 역할을 한다.

• 해당 코드를 이용하면 리팩토링을 할때 훨씬 가독성을 좋게 해줄 수 있다.

import { useState } from "react";

const StatePrevPage = () => {
  const [count, setCount] = useState(0);

  const onClickCount = () => {
    setCount((prev) => prev + 1);

    setCount((prev) => prev + 1);

    setCount((prev) => prev + 1);

    setCount((prev) => prev + 1);
  };

  return (
    <div>
      <div>현재카운트: {count}</div>
      <button onClick={onClickCount}>카운트증가</button>
    </div>
  );
};

export default StatePrevPage;

boolean. 으로 동작하는 state 함수를 prev로 리팩토링

📝 리팩토링 전

const ModalCustomPage = () => {
  const [isOpen, setIsOpen] = useState(false);

  const onOk = () => {
    setIsOpen(false);
  };

  const onCancel = () => {
    setIsOpen(false);
  };

  const showModal = () => {
    setIsOpen(false);
  };

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

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

      {isOpen && (
        <Modal visible={true} onOk={onOk} onCancel={onCancel}>
          <DaumPostcode onComplete={handleComplete} />
        </Modal>
      )}
    </>
  );
};

export default ModalCustomPage;

📝 리팩토링 후

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

const ModalCustomPage = () => {
  const [isOpen, setIsOpen] = useState(false);

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

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

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

      {isOpen && (
        <Modal visible={true} onOk={onToggleModal} onCancel={onToggleModal}>
          <DaumPostcode onComplete={handleComplete} />
        </Modal>
      )}
    </>
  );
};

export default ModalCustomPage;

📌 요약

---

setState()

• 모든 변화가 완료 된 후에 리렌더링
• 자기만의 고유한 임시저장 공간을 가진다.

setState()

• 임시저장공간에 있는 데이터를 바로 불러오는 역할
• 해당 코드를 이용하면 리팩토링을 할때 훨씬 가독성을 좋게 해줄 수 있다.