state prev

state

리액트에는 state 와 setState가 있다.
state는 쉽게 말해서 자바스크립트에서의 변수 역할을 한다고 보면 된다.
setState는 이런 state의 값을 업데이트해준다.
조금 더 자세한 내용은 이전 블로그(https://velog.io/@uiop5487/React-state-props)를 참고하고, 오늘은 state의 prev를 알아보고자 한다.

state prev

일단 이전 블로그를 보면 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이다.

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;

위에 코드를 보면 prev는 아까 말했던 setState 임시저장 공간에 있는 데이터를 바로 가져와 실행시켜줄 수 있다.
prev를 이용하면 코드를 리팩토링해주는데 용이하다.
예를 들어 아래 코드를 보자

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

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;

위에 코드는 상태 값을 true false로 바꿔는 함수들을 사용한다.
하지만 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를 이용해 현재 상태 값을 참조해 변경시켜줄 수 있게 만든다.