[React]setState는 비동기로 동작한다!

체크박스를 전체 선택후 전체 삭제를 할려고하는데 마지막 항목만 삭제가 되는 문제가 생겼다!콘솔에는 문제가 없다고 잘나온다!
무엇이 문제인가 찾아보니 비동기문제였다!리액트에서 전의 변수값을 비교해야할 상황이 필요하다면 비동기문제를 해결해야한다!

import { useState } from "react";

export default function BasicPage(){
	const [count, setCount] = useState(0);
	
	function clickHandler() {
	setCount(count + 1);
	setCount(count + 1);
	setCount(count + 1);
	setCount(count + 1);
	setCount(count + 1);
}

return(
	<div>
		{count}
		<button onClick={clickHandler}>+5</button>
	</div>
)

위 코드를 실행하면 놀랍게도 1씩 증가한다!

updater함수를 사용한다! updater함수는 state를 인자로 받는다!

이 값은 항상 최신값으로 보장된다

import { useState } from "react";

export default function BasicPage(){
	const [count, setCount] = useState(0);
	
	function clickHandler() {
	setCount(prevState => prevState +1);
	setCount(prevState => prevState +1);
	setCount(prevState => prevState +1);
	setCount(prevState => prevState +1);
	setCount(prevState => prevState +1);
}

return(
	<div>
		{count}
		<button onClick={clickHandler}>+5</button>
	</div>
)

하다보니 이상하게 updater함수가 이전 state를 인자로 받는적용이 안되는경우가 발생해서 다른 방식으로도 해결을 보았습니다.

동기로 처리하기

const plusNum = () => {
    setCnt(cnt+1);
 }
 useEffect(()=>{
  console.log(cnt);
 },[cnt])

🐔참고문헌

·React공식 web 사이트

https://ko.reactjs.org/docs/faq-state.html

·유튜브 코딩앙마님

https://www.youtube.com/watch?v=KxHOHg5raQ4&list=LL&index=2

·블로그

https://choonse.com/2022/01/21/677/