useEffect에 대한 시각적 가이드 - 정리

이것은 Visual Guide to useEffect의 두 번째 장입니다.

다음은 처음 렌더링된 후 몇 초가 경과했는지 기록하는 구성 요소입니다.

구성 요소가 마운트 해제된 후에도 효과가 계속 실행될 수 있습니다.

이제 앱에 두 페이지가 있다고 가정해 보겠습니다. 해당 페이지 중 하나만 구성 요소가 있습니다. 다음은 페이지 사이를 전환할 때 일어나는 일입니다.



로그는 구성 요소가 마운트 해제된 후에도 계속 실행됩니다. 그것을 방지하는 방법?

Every effect may return a function that cleans up after it

React performs the cleanup when the component unmounts

React Docs - useEffect

효과는 실행할 때마다 누적될 수 있습니다.

마지막으로 렌더링된 후 몇 초가 경과했는지 기록하도록 구성 요소를 변경해 보겠습니다. 다시 렌더링할 때마다 효과를 실행하려면 종속성 배열을 제거해야 합니다.



구성 요소를 계속 다시 렌더링하면 새 간격을 계속 생성합니다. 어떻게 마지막 간격만 유지합니까?

React also cleans up effects from the previous render before running the effects next time

React Docs - useEffect

언제 정리를 사용합니까?

효과를 추가할 때마다 구성 요소가 마운트 해제될 때 어떤 일이 일어날지 생각하십시오. 이 효과가 계속 실행됩니까? 그렇다면 정리 기능을 제공하십시오. 그렇게 하면 실행될 때마다 효과가 누적되는 두 번째 사용 사례가 자동으로 처리됩니다.

이 효과는 구성 요소가 마운트 해제된 후에 계속 실행되지 않습니다.
청소가 필요하지 않습니다.

useEffect(() => {
  document.title = props.title
})

이 효과는 구성 요소가 마운트 해제된 후에도 계속 실행됩니다.
정리가 필요합니다.

useEffect(() => {
  const handler = () => console.log(window.pageYOffset)
  window.addEventListener("scroll", handler);
  return () => window.removeEventListener("scroll", onScroll);
})

시각적인 React 콘텐츠의 일일 스니펫을 찾고 계십니까?