[React] state prev 는 무엇인가? 한번 ARABOZA.

우선 state prev 를 알려면 setState() 가 정확히 어떤동작을 하는지

setState() 는 비동기로 작동한다

setStatae(updater [, callback])

setState(updater [, callback]) 의 콜백 함수가 실행된 후 리렌더링 된다.

updater: (state, props) = > stateChange

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

setState() 는 비동기로 상태를 변화시키는게 가장 큰 특징이라고 할 수 있다

아래 코드를 한번 보자

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씩 증가하게 하기 위해 작성을 한 것이다.
하지만 카운트는 "1"만 오르게 된다.
그 이유는 setState에는 자기만의 고유한 임시저장 공간을 가지고 있고, setState가 실행될 때 임시저장 공간에 저장하고 그 데이터는 변하지 않고 "1"만 가지게 되는 것이다.
그리고 함수가 끝나면 화면에 렌더링 된다.

이럴 때 사용할 수 있는 것이 state의 prev이다.

여기서 사용할수있는데 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;

우선 전체적인 개념은 이렇다 바로 전 데이터를 불러와 번거로운 코딩을 가독성과 실용성을 좋게해준다

다른것도 할 수가있는데 예를들면

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;

boolean. 으로 동작하는 해당 state 함수를 prev로 리팩토링했을때

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;

하나의 함수에 prev를 이용해 현재 상태 값을 참조해 변경시켜줄 수 있게 만든다.