State와 Prev

state prev

state는 리액트 컴포넌트에서 데이터를 담는 상자이며, setState를 통해 값을 변경한다.

버튼을 클릭해 카운트를 증가시켜보자.

import { useState } from 'react'
function Up() {
    const [count, setCount] = useState(0) 
    function handleClick() {
        setCount(count + 1)     
    }
    return (
       <div>
          <h1>{count}</h1>
          <button onClick={handleClick}>
          		count 증가 </button>
       </div>
    )
}
export default Up

카운트가 5개씩 증가되려면 어떻게 해야할까?

function handleClick() {
   setCount((prev)=>prev+1)     
  // 임시 저장공간의 0(기본값, prev)+1 => 1을 상자에 담는다.
   setCount((prev)=>prev+1)     
  // 임시 저장공간에 담긴 1(prev)+1 => 2를 상자에 담는다.
   setCount((prev)=>prev+1)     
  // 임시 저장공간에 담긴 2(prev)+1 => 3를 상자에 담는다.
   setCount((prev)=>prev+1)     
  // 임시 저장공간에 담긴 3(prev)+1 => 4를 상자에 담는다.
   setCount((prev)=>prev+1)     
  // 임시 저장공간에 담긴 4(prev)+1 => 5를 상자에 담는다.

prev를 사용하면 임시 저장공간에 있는 값을 먼저 꺼내오고 만약 임시 저장 공간에 값이 없으면 기본 값을 불러온다.

prev의 정체는?

setCount((prev)=>{return prev+1})

setCount 함수의 인자로 화살표 함수가 들어가고, 화살표 함수 안의 prev는 함수의 파라미터이다.

setCount((prev)=>{return prev+1})