인프런 커뮤니티 질문&답변
작성한 질문수
setTime이 비동기 처리를 하는 지 궁금합니다!
작성
·
188
1
import React from "react";
function TimeComponent() {
const [time, setTime] = React.useState(0);
console.log("컴포넌트가 업데이트됩니다.");
React.useEffect(function () {
console.log(time);
setTime(time + 1);
console.log(time);
}, []);
return (
<div>
<h3>{time}</h3>
<button>1초씩 증가합니다.</button>
</div>
);
}
export default TimeComponent;
setTime 함수 전후에 console.log 를 추가해서 실행해봤는데 개발자도구 출력에서 console.log 2개가 먼저 처리되고 컴포넌트가 업데이트되는 것 같아서 이 경우가 비동기 처리인지 궁금합니다!
답변 1
1
그랩
지식공유자
넵 비동기처리가 맞습니다.
settime을 한다고 바로 time이 1이 되지는 않습다. 그래서 0 다음에 0이 또 찍힌거구요. react에서는 state를 변경하면 새롭게 render를 다시하게 됩니다!
만약 동기처리였다면, settime 을 하면 바로 render가 되기 때문에 아래 console.log 코드는 실행되지 않겠죠?