state prev

useState는 react의 함수형 컴포넌트를 클래스형 컴포넌트와 같이 기능할 수 있도록 도와주는 Hooks의 한 종류입니다.
state에 정보를 저장하고 가져올 수 있죠.
state의 구조를 다시 한번 보면

const [변수명, 변수바꾸는기능] = 변수만드는기능(담을내용)

이렇게 됩니다.

이 state는 function에 쓰게 되면 함수가 다 끝나야 랜더링이 되어 마지막 줄만 1버 랜더링 됩니다.
예제로

import { useState } from 'react'

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

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

export default New

setCount에 count + 1 을 넣어주면 함수가 들어가 버튼을 클릭할 때마다 1씩 더해지는 기능이 정상적으로 수행됩니다. 하시만 한번에 5개씩 올려주고 싶어 count + 1 을 5줄 써보면 어떻게 될까요?

setCount가 나올때마다 임시저장공간에 데이터를 다시 집어넣습니다.
즉 함수가 다 끝나면 그때 리렌더링을 하기에 마지막 count + 1 만 적용됩니다.
그럼 count + 1 을 5번 써서 5를 올리고 싶다면 우리는 prev를 사용해야합니다.

prev를 사용하게 되면 임시저장공간에 있는 값을 꺼내오게 되는데 이때 처음이라 저장공간이 없다면 기본 값을 불러옵니다. 그렇게 임시저장공간에 계속 값을 더해주기 때문에 우리가 원하는데로 5씩 올릴 수 있습니다.
리렌더를 1번 하는 건 똑같지만 저장공간에 값을 저장하는 방식이 다릅니다.

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가 반영된다
}

이렇게 우리가 의도한대로 화면에 반영하면서 코드를 리팩토링 하는데도 효율적으로 사용됩니다.

만약 boolean을 value로 가지는 state라면 (prev) => !prev 를 넣어 토글처럼 활용할 수도 있습니다. 효율적이고 적은 코드로 가독성도 좋아지는 방법인 state prev에 대해 알아보았습니다.