프리뷰 스테이트

예전에 만들었던 카운트 코드

export default function CounterLetDocumentPage(){
  const[ count, setCount ] = useState(0)

  function onClickCountUp () {
    setCount(count + 1)
  }
  return(
    <div>
    <div>{count}</div>    
    <button onClick={onClickCountUp}>카운트 올리기</button>
</div>
)
}

만약

function onClickCountUp () {
  setCount(count + 1)
  setCount(count + 1)
  setCount(count + 1)
  setCount(count + 1)
  setCount(count + 1)
}

이런식으로 만들면 어떻게 될까?
리액트에서는 임시 저장공간에 놓고 계산을 하기 때문에
결국 1만 증가하게된다.

function onClickCountUp () {
  setCount(2)
  setCount(4)
  setCount(3)
  setCount(6)
  setCount(1)
}

하면 전부 무시하고 마지막의 1만 저장된다

그런데 사용상황에 따라서는 5개의 setCount기능을 전부 사용하고 싶을때가 있다.
그럴때 사용하는게 prev state이다.

function onClickCountUp () {
  setCount((a) => a + 1);
  setCount((a) => a + 1);
  setCount((a) => a + 1);
  setCount((a) => a + 1);
  setCount((a) => a + 1);
}

setCount 내부에서 화살표 함수를 사용해서 사용

임시공간에 지정한 변수 a 가 있으면 가져와서 하고 없으면 count에서 가져와서 계산하는 방식

prev를 사용해서 모달 리팩토링 하기

import {Modal} from "antd"
import { useState } from "react"
import DaumPostcodeEmbed from 'react-daum-postcode';
import type { Address } from 'react-daum-postcode';

export default function ModalAlertPage() {
  const [isOpen, setIsOpen] = useState(false)
  const showModal = () => {
    setIsOpen(true);
  }
  const handleOk = () => {
    setIsOpen(false);
  }
  const handleCancel = () => {
    setIsOpen(false);
  }
  const handleComplete = (data : Address) => {
    console.log(data)
    setIsOpen(false)
  }
  return (
    <>
    	<button onClick={showModal}>모달창 열기</button>
		{isOpen && (
  			<Modal title="모달 제목" open={isOpen} onOk={handleOk} onCancel={handleCancel}>
  				<DaumPostcodeEmbed onComplete={handleComplete}  />
    		</Modal>
		)}
  	</>
	)
}

기존 코드

모달창 열기를 누르면 setIsOpen의 값이 변경됨. (False -> True)
prev를 사용하면

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

이런식으로 현재값의 반대로 반전시키는 코드를 만들 수 있다.

코드를 이런식으로 수정하면 동일한 코드가 반복된다
반복되는 함수들을 하나로 만들어주면

import {Modal} from "antd"
import { useState } from "react"
import DaumPostcodeEmbed from 'react-daum-postcode';
import type { Address } from 'react-daum-postcode';

export default function ModalAlertPage() {
  const [isOpen, setIsOpen] = useState(false)
  const onToggleModal = () => {
    setIsOpen((a) => !a);
  }
  const handleComplete = (data : Address) => {
    console.log(data)
    onToggleModal();
  }
  return (
    <>
      <button onClick={onToggleModal}>모달창 열기</button>
	  {isOpen && (
  		<Modal title="모달 제목" open={isOpen} onOk={onToggleModal} onCancel={onToggleModal}>
  		  <DaumPostcodeEmbed onComplete={handleComplete}  />
    	</Modal>
	  )}
    </>
  )
}

이렇게 리팩토링할 수 있다.