[React]비동기 처리되는 setState 함수
setState 함수의 비동기적 실행
리액트의 setState(변경) 함수는 전부 비동기적으로 실행됩니다. 그렇기 때문에 코드 실행시에 다음과 같이 예기치 못한 문제가 발생할 수 있습니다.
Thread와 비동기 비교하기동기적 프로그래밍은 테스크(Task)를 순차적, 직렬적으로 수행하도록 하여 어떤 테스크가 수행 중이면 다음 테스크는 대기하게하는 방식의 프로그래밍이다....
예제
버튼을 클릭하면 age에 +1을 하고 세번째 클릭시에는 +1을 하지 않도록 코드를 짭니다.
function App() {
let [count, setCount] = useState(0);
let [age, setAge] = useState(20);
return (
<div>안녕하십니까 전 {age}</div>
<button onClick={()=>{
setCount(count+1);
if( count < 3){
setAge(age+1)
}
}}>누르면한살먹기</button>
</div>
)
}
이렇게 짜면 3번째 클릭시에는 +1이 반영되지 않아야 할 것 같지만, setState 함수 즉, setCount(count+1); 부분이 비동기적으로 실행되기 때문에 다음 코드인 if문을 먼저 실행한 후에 실행합니다. 그래서 +1을 한 후에 count가 3이 되는 것이죠.
useEffect 함수를 사용하여 동기적 실행
위와 같은 코드의 경우 동기적으로 실행하는 것이 좋습니다. useEffect를 사용하면 state가 변경될 때 useEffect 내부의 코드를 실행할 수 있습니다.
function App() {
let [count, setCount] = useState(0);
let [age, setAge] = useState(20);
useEffect(()=>{
if( count !== 0 && count < 3){
setAge(age+1)
}
},[count])
return (
<div>
<div>안녕하십니까 전 {age}</div>
<button onClick={()=>{
setCount(count+1);
}}>누르면한살먹기</button>
</div>
)
}count 값이 변경될 때 setCount(count+1); 이 부분 코드가 실행되도록 작성했기 때문에 count가 3일때 count+1이 실행되지 않게 됩니다.
