✍🏻 [Code Camp_TIL] 12일차: state와 prev

State와 Prev

import { useState } from 'react'

export default function New() {
    const [count, setCount] = useState(0)
    
    function handleClick() {
        setCount(count + 1)     // 갯수가 증가하면서, 화면에 정상적으로 **반영됨**
    }

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={handleClick}>state를 사용하여 count 증가</button>
        </div>
    )
}

위의 코드를 실행하면 button을 클릭할 때마다 1씩 증가한다. 여기서 만약, count를 5씩 증가시키려면 어떻게 할까?

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가 하나씩만 증가하게 된다. 매번 임시저장공간에 1을 담지만, 다음 줄의 코드로 넘어가면 다시 새롭게 1을 담기 때문이다.

우리가 원하는 대로 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를 사용하면 임시저장공간에 있는 값을 먼저 꺼내오고, 만약 임시 저장공간에 있는 값이 없다면 기본값을 불러오게 된다!

state는 변경될 때마다 임시저장공간에 새롭게 값을 저장하지만, prev는 임시저장공간에 있는 값을 꺼내온다! prev가 임시저장공간을 제대로 활용할 줄 아는 아이라고 생각하면 된다.