[React] useState의 이전값(prev state)

문제점

프로젝트(LibertyFrom)를 진행하면서 useState를 변화시키기 위해 useState의 set함수를 연속적으로 적었다.

setUser([...state, ...add1])
setUser([...state, ...add2])

당연히 add1이 적용되고 add2가 적용되어 반영될 줄 알았지만 원하는대로 반영이 되지 않았다.

원인

state를 변화시키는 setter함수는 비동기처럼 동작해 바로 상태변수의 변화를 반영하지 못하기 때문에 일어나는 현상이었다.

해결방법

setter함수에 함수를 전달해 상태변수의 현재값을 바탕으로 변화하도록 작성하면 된다.

setUser((prev)=>([...state, ...add1]))
setUser((prev)=>([...state, ...add2]))

참고한 예시

import React, { useState } from 'react';
 
const [count, setCount] = useState(0);
 
// 누르면 count가 2씩 증가하는 
setCount(count + 1);
setCount(count + 1);
console.log(count);

count가 정상적으로 올라가지 않기에 다음과 같이 작성해야한다.

import React, { useState } from 'react';
 
const [count, setCount] = useState(0);
 
// 누르면 count가 2씩 증가하는 
setCount((prev)=>(count + 1));
setCount((prev)=>(count + 1));
console.log(count);

의문점?

setCount((prev)=>(count + 1));

prevState의 값을 가져와서 다음 상태를 업데이트 하게 된다.

count와 같이 간단한 값이면 prevState를 불러오는데 문제가 없지만 만약 한번 불러오기에 큰 데이터라면 성능 부분에서 문제가 생기지 않을까..?
→ 구글링을 해보니 초깃값을 값 그대로가 아닌 callback 형태로 넣어주면 된다고 한다.