useEffect

[React.js] useEffect, cleanUp, deps, unMount에 대하여

useEffect의 클린업 함수 실행 시점과 deps 배열 (= 의존성 배열) 이 미치는 영향에 대해 알아보자. 클린업, cleanUp 하나의 상황을 가정해보겠다. 클릭할 때마다 카운트가 올라가는 Count라는 컴포넌트가 있다. 컴포넌트가 언마운트 되었을 때 해당 컴포넌트가 갖고 있는 state인 count의 값을 로깅하고 싶다. 어떻게 구현하겠는가? 가장 먼저 떠올릴 수 있는 방법이 useEffect의 cleanup을 이용하는 것이다. 언마운트 될 때만 실행하면 되니까 deps 에는 빈 배열을 주면 될 것 같다. 자, 카운트를 증가시키고 언마운트 시킨 뒤 로그를 확인해보자. 예상대로 동작하지 않는다. 왜 그럴까? useEffect의 deps가 빈 배열일 경우 effect 내부의 props, state ..