728x90
프로젝트를 진행하면서, 다른 개발자가 함수 내에 setState하나를 작성할 때, prevState 이용하여 현재 상태와 반대되는 값으로 작성한 코드가 있었다.
해당 코드는 현재 상태와 반대되는 값으로 변경해주는 코드였다.
나는 prevState대신에, 현재 state와 반대되는 값으로 바로 !state를 해주면 되지않을까? 라는 생각이 들어 찾아보았다.
setState부터 알아보자
state를 변경하는 함수로, 비동기적으로 동작한다.
const [state, setState] = useState(0);
function sumAll() {
setState(state + 1);
setState(state + 2);
setState(state + 3);
setState(state + 4);
}
위의 코드에서 sumAll함수는 state의 값에 +1, +2, +3, +4 가 되어 +7이 될 것처럼 보이지만,
setState는 비동기적으로 동작하기 때문에 state+4 인 마지막 코드만 실행이 된다.
prevState를 이용하면?
const [state, setState] = useState(0);
function sumAll() {
setState((prev) => prev + 1);
setState((prev) => prev + 2);
setState((prev) => prev + 3);
setState((prev) => prev + 4);
}
위와 같이 콜백함수로, 이전의 값에 +1, +2 +3, +4가 되어 state 값은 7이 된다.
setState의 인자로 사용된 함수는 이전 state의 값을 전달받으며, 그 값을 이용한 함수들은 큐에 저장되어 순서대로 실행될 수 있다.
큐에서 차례로 prev값을 받아 수행할 수 있으니 모든 setState구문이 동작한다.
즉, 여러개의 setState를 하여 동기적으로 state값이 변경이 필요할 경우 prevState를 이용하면 된다.
참고문서
https://velog.io/@alsqjarlwkd/prevState
https://velog.io/@mh-yeo/React-prevState-in-setState
728x90