반응형 useEffect3 useEffect의 cleanUp 함수에 대한 착각 : unmount시 발생하는 것이 아니다! useEffect의 cleanUp 함수에 대한 착각 : unmount시 발생하는 것이 아니다! 들어가기에 앞서 결론부터 말하자면 공식문서에 나와있다 실제 실험을 통해 페이지 이동(unmount)이 안되어도 setInterval을 정리하여 버그를 차단함을 알 수 있었다. 1. clean-up 없을 때 import { useEffect, useState } from "react"; const initialCount = 0; function FrequentlyChangableDependencyInEffect() { const [count, setCount] = useState(initialCount); useEffect(() => { setInterval(() => { setCount(count); }, 10.. 2022. 8. 12. useEffect 특징 useEffect useEffect는 sideEffect를 다루는 훅이다. 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기한다. 다음은 전역변수 foo를 bar라는 함수가 수정하는 예제이다. let foo = 'hello'; function bar() { foo = 'world'; } bar(); // bar는 Side Effect를 발생시킵니다! 보통 리액트를 통해 애플리케이션을 제작할 때, AJAX 요청이 필요하거나, Local Storage 또는 타이머 같은 리액트와 상관없는 API를 다루는 상황이 온다. 이는 리액트 입장에서 전부 Side Effect 이다. 리액트는 Side Effect를 다루기 위해 Effect Hook을 제공한다. u.. 2022. 1. 1. 경고 : setTimeout으로 인한 메모리누수 => 페이지 unmount될때 setTimeout 꺼주기 아래의 NextBtn 함수가 5초마다 실행되는데, 페이지를 옮긴후에도 setTimeout이 실행되어 메모리 누수가 발생한다는 내용이다. 그럼 페이지를 옮겼을때 setTimeout을 꺼주면 된다. 나의 경우에서는 다음과 같이했다. return () => { mounted = false; }; 이 부분은 오늘 처음보는 형식인데, unmount될 때 실행되는 함수인것같다. => 아닌걸로 판명, 공식문서에 따르면 모든리렌더링시마다 실행된다.(의존성배열넣으면 의존성배열이 변할때마다) https://ko.reactjs.org/docs/hooks-effect.html#explanation-why-effects-run-on-each-update 참고자료 : https://norwayy.tistory.com/370?ca.. 2021. 12. 9. 이전 1 다음 반응형
