State prev

state 란 리액트 컴포넌트에서 데이터를 담기 위한 상자와도 같다. 이 상자에 담긴 내용들은 함수가 모두 끝나게 되면 화면에 반영이 된다.
따라서 한 번에 여러개의 state를 사용해도 함수가 종료 된 다음에 화면에 리렌더링되는 성질이 있다. 이렇게 state는 비동기로 상태를 변화시키는게 가장 큰 특징이다.

import { useState } from 'react'

function New() {
    const [count, setCount] = useState(0)
    
    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이 반영된다
    }

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

export default New

prev

위와 같은 로직에 따라 count는 하나씩만 증가하게 된다. 만약 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라는 임시 저장공간에 있는 값을 먼저 꺼내온다. 만약 임시 저장공간에 있는 값이 없다면 기본 값을 불러오개 된다.

⭐️ prev 사용 이점
→ 화면에 바로 반영
→ 코드를 리팩토링하는데도 효율적