week 2 TIL에서 살펴본 바와 같이 state라는 개념이 있다
수없이 useState를 쓰고 있지만 머릿속에 남은건 데이터 저장 박스이자 데이터를 임시로 보관하는 저장소가 마련되어 있다는 것 뿐...
데이터를 저장하는 박스와 임시 보관 저장소가 눈에 보이지 않아 아직까지도 그 개념이 완벽히 이해가 되고 있진 않다ㅠ
이러한 상황에서 3주차가 되었고, 'prev'라는 개념을 배웠다.

1. prev란?

위에서 말한 것 처럼 state를 사용하면 데이터가 임시 보관 저장소에 잠시 보내진다. container 파일에서 presenter 파일로 데이터를 불러오기 위해서 props가 필요했던 것처럼, state 임시 저장소에서 데이터를 불러오기 위해 prev를 사용한다.
(임시 저장소를 사용하는 이유는 불필요한 렌더링을 방지하고 비동기적으로 작동시켜 성능을 향상시키기 위함이라고 한다.)

사실 이렇게 얘기하면 개념이 와닿지 않으니 바로 예시를 들어 살펴보자!

2. prev 살펴보기

버튼을 누를 때 마다 5점씩 증가하는 버튼을 만들어 보자
나같은 코린이의 단순한 생각으론 아래와 같은 코드면 작동이 될 것이라고 생각했다

import {useState} from 'react'

export default function CountPage() {
	const [count, setCount] = useState(0)
    
    const onClickButton = () => {
    	setCount(count+1)
        setCount(count+1)
        setCount(count+1)
        setCount(count+1)
        setCount(count+1)
     }
     
     return (
     	<>
        	<h1> {count} </h1>
            <button onClick={onClickButton}>Count 증가!</button>
        </>
     
     )
   }

하지만 이 함수를 실행할 경우 버튼을 누를 때마다 여전히 1씩 증가하는 것을 볼 수 있다.
이러한 문제점을 해결하기 위해 prev를 사용할 수 있다.

   import {useState} from 'react'

export default function CountPage() {
	const [count, setCount] = useState(0)
    
    const onClickButton = () => {
    	 setCount((prev) => (prev+1))
        setCount(prev => (prev+1))
        setCount(prev => prev+1)
        setCount(prev => prev+1)
        setCount(prev => prev+1)
     }
     
     return (
     	<>
        	<h1> {count} </h1>
            <button onClick={onClickButton}>Count 증가!</button>
        </>
     
     )
   }

setCount 안은 위처럼 화살표 기준으로 양쪽 다 소괄호를 넣어도 되고, 양쪽 다 생략도 가능하며 한쪽만 사용도 가능하니 편한대로 선택해서 사용하면 될 것 같다!
이렇게 짜여진 함수를 실행할 경우 버튼을 누를 때마다 5씩 증가하는 것을 볼 수 있다.

3. prev 원리

위 코드를 기준으로 prevd의 원리를 살펴보자!

1. useState(0)으로 선언된 count의 값을 임시 저장 공간 prev에 0으로 저장해둔다.

2. setCount식의 영향으로 prev에 1이 더해져 1이 임시 저장 공간 prev에 저장된다.

3. 1로 저장된 prev가 다음 setCount식의 영향으로 +1이 되어 2로 prev에 저장된다.

4. 같은 동작 원리가 다섯 번 반복되어 최종적으로 prev에 5가 저장되어 setCount(5)가 실행된다.