State와 Prev

이전에 배운 State에 대해서 기억하시나요?

State란 리액트 컴포넌트에서 데이터를 담기 위한 상자라고 했었습니다. 이 상자에 담긴 내용들은 함수가 모두 끝나게 되면 화면에 반영이 되는데요. State를 이해하기 위해 만든 counter를 다시 보겠습니다.

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

위 코드를 화면에 출력해보면 버튼을 클릭할 때 마다 갯수가 하나씩 증가하면서 정상적으로 반영됩니다.

하지만, count를 5개씩 증가시켜주기 위해 코드가 아래와 같이 바뀌게 된다면 어떻게 될까요? 우리가 의도한대로 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가 하나씩만 증가되게 됩니다. 우리가 의도한대로 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를 사용하시게되면 우리가 의도한대로 화면에 반영함과 동시에, 코드를 리팩토링하는데도 효율적이기 때문에 잘 활용해주시면 좋겠습니다.