데이터 가져오기 문제 및 정리

일본어로 기사를 읽으려면 여기를 클릭하세요: https://zenn.dev/takuyakikuchi/articles/a96b8d97a0450c
useEffect()가 필요하지 않은 예제를 제공하는 공식 React 문서You Might Not Need an Effect를 읽었습니다.
많은 것을 배웠던 "데이터 가져오기"부분에 머리를 감아야 했기 때문에 이 기사를 작성했습니다.

문제가 있는 코드

(이 기사에 사용된 예제 코드는 You Might Not Need an Effect 에서 직접 가져온 것입니다.)

function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  const [page, setPage] = useState(1);

  useEffect(() => {
    fetchResults(query, page).then(json => {
      setResults(json);
    });
  }, [query, page]);

  function handleNextPageClick() {
    setPage(page + 1);
  }
  // ...
}

이 예제는 "경쟁 조건"이라는 문제를 일으킬 수 있습니다.
Race condition - Wikipedia

기사에서 예를 들면 "hello"를 빠르게 입력하는 것이 좋습니다.
쿼리가 "h"에서 "he", "hel", "hell"및 "hello"로 변경되고 이러한 입력 변경으로 인해 별도의 데이터 가져오기가 시작됩니다.
"hello"가 마지막에 입력되었으므로 "hello"결과가 반환된 마지막 결과일 것으로 예상하지만 문제는 그렇지 않을 수 있다는 것입니다.
"hell"응답이 "hello"응답 뒤에 올 수 있으며, 이 경우 setResults()가 마지막으로 실행되면서 "hell"결과가 표시됩니다.

시각화는 다음과 같습니다.
결과의 순서는 데이터를 가져오는 동안 전환되며 "지옥"결과가 최종 결과가 됩니다results.

정리 코드를 사용한 솔루션

function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  const [page, setPage] = useState(1); 
  useEffect(() => {
    let ignore = false;
    fetchResults(query, page).then(json => {
      if (!ignore) {
        setResults(json);
      }
    });
    // ====== 💫 here's the point =====
    return () => {
      ignore = true;
    }
    // ============================
  }, [query, page]);

  function handleNextPageClick() {
    setPage(page + 1);
  }
  // ...
}

이제 솔루션의 코드를 보면 정리가 추가된 것을 볼 수 있습니다.
정리는 ignore라는 변수를 사용하여 setResults()의 실행을 제어합니다.
여기에서 머리를 감싸야했습니다.

먼저 useEffect() 정리가 실행되는 시점을 살펴보겠습니다.
React 공식 문서Using the Effect Hook – React에서

React는 구성 요소가 마운트 해제될 때 정리를 수행합니다.

또한 React는 다음 부작용을 실행하기 전에 이전 렌더링의 부작용을 정리합니다.

이 경우 2의 타이밍이 중요합니다.useEffect()는 "he", "hel", "hell", "hello"의 순서로 실행되며, 이전useEffect()은 다음useEffect()이 실행되기 전 타이밍에 정리됩니다.
이 예에서 ignore는 정리에서 true로 설정되므로 정리가 데이터 가져오기를 완료하기 전에 실행되는 setResults()에 대해 useEffect()가 실행되지 않습니다.
마지막으로 실행되는 "hello"useEffect()에는 다음useEffect()이 없으므로 정리가 실행되지 않아 setResults()가 마지막으로 실행됩니다.

이것이 제가 생각하는 비주얼리제이션의 모습입니다.



정리를 사용하여 데이터를 가져오는 효과입니다.

드디어

이 기사에서는 useEffect()의 정리에 대해 알아보고 useEffect() 데이터 가져오기에서 정리를 구현하는 것이 중요한 이유를 알아보았습니다.

데이터 가져오기의 부작용을 사용자 지정 후크로 추출하는 것이 좋습니다.
그것과 useEffect()를 사용해서는 안 되는 다른 많은 상황을 소개하는 원본 기사는 매우 흥미롭고 읽어 보시기 바랍니다.
You Might Not Need an Effect