158. useEffect 훅 사용하기

로컬 저장소에 접근과 같은 기능이 없었기 때문에 여태까지 useEffect를 사용하지 않았는데

버튼을 클릭할 때마다 bump 애니메이션 효과를 주도록 하는 것에 useEffect 훅을 사용할 것이다

 

버튼을 클릭하면 bump class가 추가되도록 하고 또 타이머를 설정해 그 class가 사라지도록 할 것이다

이제 클린업 함수도 추가하고 싶은데요

타이머를 지우도록요

해당 컴포넌트를 삭제해야 하는 경우에요

하지만 그건 이 애플리케이션에서는 일어날 수 없는 일입니다

버튼은 항상 있어야 하니까요

하지만 그렇더라도 타이머 또는 실행 중일 수도 있는

기타 사이드이펙트는, 정리하는 것이 좋은 습관입니다

왜냐하면 useEffect에서 시작했으니까요

따라서 여기서 클린업 함수를 반환하겠습니다

useEffect에서 함수를 반환하면

리액트에 의해 클린업 함수로 자동으로

호출된다는 것은 앞에서 배웠죠

따라서 여기서 clearTimeout을 호출하고 타이머를 지우겠습니다