learn/synchronizing-with-effects

[giscus[bot]]

learn/synchronizing-with-effects

The library for web and native user interfaces

https://react-ko.dev/learn/synchronizing-with-effects

[JoonHyeongHong]

데이터 패칭하기

useEffect(() => {
  let ignore = false;

  async function startFetching() {
    const json = await fetchTodos(userId);
    if (!ignore) {
      setTodos(json);
    }
  }

  startFetching();

  return () => {
    ignore = true;
  };
}, [userId]);

어떻게 이 코드에서 재호출될 시 ignore 값이 true가 되어 setTodo()가 한 번 밖에 실행되지 않을 수 있나요?
useEffect 내의 익명함수가 호출되면 새로 ignore 변수가 선언되고 false가 할당되서, useEffect가 실행될 떄마다 항상 false값이 유지될 것 같은데 ignore라는 변수를 useEffect 밖에서 선언해야하는 것이 아닌가 싶습니다.
그게 아니라 저 코드가 맞다면, 왜 그런지 설명해주실 수 있나요?

[JoonHyeongHong]

아, 혹시 맨 처음 실행되던 익명함수가 실행되자마자 곧 바로 return으로 강제종료되면서, 비동기로 실행중이던 startFetching함수는 이미 return을 통해 true로 변한 ignore 변수를 true로 인식한 건가요?
그래서 StrictMode에서 다시 한 번 실행한 fetch를 통해 데이터를 받는데, 이번엔 ignore이 false이니 setTodo를 통해 todo에 넣는 것이고요.

그렇다면, 첫 실행에서 데이터를 넣는다고 생각했는데
두번째 실행에서 넣는 것인것 같군요.

[roy-jung]

이제서야 봐서 답변이 늦어졌네요.
최초 userId가 A로 설정되었다고 가정해 보죠. 그럼 useEffect에 의해 startFetching이 호출될 것입니다.
그런데 비동기함수인 fetchTodos의 응답이 아직 오지 않은 상태에서 userId가 A에서 B로 변경되면,
기존 A로 인식하고 있는 컨텍스트에서 cleanup 함수가 호출되면서 ignore가 true로 됩니다.
이후 fetchTodos의 응답이 도달하면, 해당 컨텍스트에서는 ignore가 true인 상태이므로 setTodos를 호출하지 않게 됩니다.

첫 실행 / 두번째 실행의 문제는 아니에요. Strict Mode와 관련된 문제도 아닙니다.
cleanup은 해당 컴포넌트가 unmount될 때에도 호출되며, 어떤 경우에 호출되든 '첫 실행'의 컨텍스트에 포함된 호출입니다.

[uhuikim]

Q. useEffect 실행시점

안녕하세요!

useEffect 공부하다가 실행 시점에 대해 궁금한게 생겨 댓글 남깁니다.

문서에서 보면 useEffect는 커밋이 끝나면 실행된다고 나와있습니다. 강의 2:00 ~ 2:40 에서 이부분에 대해서 말씀을 해주시는데요!

이전 문서에서 리액트는 “렌더 > 커밋 > 페인팅” 단계로 실행이 된다고 설명하고 있습니다.
그렇다면 커밋이 끝나고 useEffect가 실행이 된 후 페인팅이 일어난다는 것일 까요?

useLayoutEffect에 대한 설명을 보면 브라우저가 화면을 리페인트 하기전에 실행되는 useEffect버전이라고 나와있습니다.

useLayoutEffect is a version of useEffect that fires before the browser repaints the screen.

저는 지금까지 useLayoutEffect와 useEffect를 비교하면서 useEffect는 페인팅이 된 이후에 실행이 되어 화면 깜빡거림이 보이고 useLayoutEffect는 페인팅 이전에 실행이 되어 사용자가 깜빡거림을 경험하지 않는다라고 알고 있었습니다.

이번 문서와 강의를 보면서 조금 헷갈리는데ㅠㅠuseEffect는 정확히 언제 실행 되는걸까요?!

[roy-jung]

https://react-ko.dev/reference/react/useLayoutEffect

이 문서를 읽어보시면 이해하시는 데에 도움이 될 것 같습니다.
repaint(리페인트)가 '다시 그리기'로 번역되어 있는데, 이부분만 감안하고 읽어보세요 :)