인프런 커뮤니티 질문&답변

작성한 질문수

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

useEffect 사용하기

setTime이 비동기 처리를 하는 지 궁금합니다!

작성

·

189

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개가 먼저 처리되고 컴포넌트가 업데이트되는 것 같아서 이 경우가 비동기 처리인지 궁금합니다!

HTML/CSS react-native javascript react tensorflow express nodejs 머신러닝 배워볼래요?

퀴즈

61%나 틀려요. 한번 도전해보세요!

왜 복잡한 웹사이트 개발에 React를 사용하면 좋은가요?

데이터베이스 관리 자동화 기능 제공

전통적인 방식의 복잡성 및 유지보수 문제 해결

서버 응답 속도를 획기적으로 향상

웹 페이지 디자인을 자동으로 생성

답변 1

1

지식공유자

넵 비동기처리가 맞습니다.

settime을 한다고 바로 time이 1이 되지는 않습다. 그래서 0 다음에 0이 또 찍힌거구요. react에서는 state를 변경하면 새롭게 render를 다시하게 됩니다!

만약 동기처리였다면, settime 을 하면 바로 render가 되기 때문에 아래 console.log 코드는 실행되지 않겠죠?

작성한 질문수