-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
비동기로 동작하는 setState에 대해서
24.03.25 13:58 작성 24.03.25 14:00 수정 조회수 107
0
안녕하세요 제로초님
setState 질문이 있는데요
아래 코드에서
1번 코드의 경우 setState함수는 비동기라서 해당 이벤트 함수가 실행된 후 setState함수를 모아서 일괄 처리하기 때문에 +3이 아닌 +1로 렌더링된다 라고 알고 있는데요
2번 코드에서는 왜 +3으로 렌더링되는지 이해가 되지 않아서요. setNum((prev) => prev + 1) 처럼 이전 state 값을 받아오는 형태도 아닌데 어떤 원리로 1번 코드와 2번 코드가 서로 다르게 동작하는 것인지 궁금합니다
import React, {useState} from 'react';
export function App(props) {
let [num, setNum] = useState(0);
const increase1 = () => {
// 1번 코드
setNum(num + 1);
setNum(num + 1);
setNum(num + 1);
// 2번 코드
setNum(num = num + 1);
setNum(num = num + 1);
setNum(num = num + 1);
console.log(`${num}번째 1+ 이벤트 발생 ---> num: ${num}`);
}
console.log(`렌더링 ---> num : ${num}`);
return (
<div className='App'>
<button type="button" onClick={increase1}>+1</button>
<p>{num}</p>
</div>
);
}
답변을 작성해보세요.
답변 1