코드캠프 3주차 주말, State prev

오늘은 코드캠프 3주차 주말이다 ..
요즘들어 나의 다크서클이 점점 더 진해지는 것을 하루하루 느끼고 있다.
한 주정도만 더 지나면 이제 이 생활도 익숙해지지 않을까 생각된다.

오늘은 리액트 State prev에 대해서 적어보려고 한다.

State prev

리액트에서 state는 상태관리를 해주는 것. 데이터를 담아주는 박스와 같다.

그리고 state와 항상 붙어 있는 함수인 setState가 있는데 이 함수는 state객체를 업데이트 해주는 함수이다.

setState는 불필요한 렌더링을 방지하며 성능향상을 위해 즉시 함수를 수행하지 않도록 설계가 되었다고 한다.

다시말하면 비동기적으로 작동한다고 말할 수 있겠다.

const upCount = () => {
	setCount(count + 1)
}

<button onClick={upCount}>카운트 1증가</button>

위 코드에서 버튼을 클릭하면 카운트가 1씩 증가하게 된다.

그런데 만약....

const upCount = () => {
	setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
}

<button onClick={upCount}>카운트 5증가?</button>

이런식으로 코드를 작성하면 과연 카운트가 5씩 증가를 할까?
생각과는 달리 카운트는 1씩 증가한다.
그렇다면 카운트를 5씩 증가시키려면 어떻게 해야할까?
그럴 때 prev(임시저장공간)가 사용된다.

prev (임시저장공간)

const upCount = () => {
	setCount((prev) => prev + 1)
    setCount((prev) => prev + 1)
    setCount((prev) => prev + 1)
    setCount((prev) => prev + 1)
    setCount((prev) => prev + 1)
}

<button onClick={upCount}>카운트 5증가?</button>

위와 같이 작성하면 카운트는 5씩 증가하게 된다.
과연 어떤 원리라 적용이 되는 건가?

1. 먼저 count라는 state의 초기값 0을 prev라는 임시 공간에 담는다.
2. 임시공간인 prev에 +1을 한 후 다시 prev에 담는다.
3. 이 작업을 반복한다.
4. 최종적으로 setCount((prev) => prev + 1) 에서 4가 담겨있는 prev에 1을 더해 setCount(5)가 실행 되는 것이다.

오늘은 state 임시저장공간인 prev에 대해 알아보았다. 유용하게 쓰이는 부분이므로 머리속에 확실히 새겨놔야 겠다. 아디오스!