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

useEffect의 클린업 함수 실행 시점과 deps 배열 (= 의존성 배열) 이 미치는 영향에 대해 알아보자.

 

클린업, cleanUp

하나의 상황을 가정해보겠다.

클릭할 때마다 카운트가 올라가는 Count라는 컴포넌트가 있다.

컴포넌트가 언마운트 되었을 때 해당 컴포넌트가 갖고 있는 state인 count의 값을 로깅하고 싶다.

 

어떻게 구현하겠는가?

 

가장 먼저 떠올릴 수 있는 방법이 useEffect의 cleanup을 이용하는 것이다.

언마운트 될 때만 실행하면 되니까 deps 에는 빈 배열을 주면 될 것 같다.

 

 

자, 카운트를 증가시키고 언마운트 시킨 뒤 로그를 확인해보자.

 

예상대로 동작하지 않는다. 왜 그럴까?

 

useEffect의 deps가 빈 배열일 경우 effect 내부의 props, state 값은 최신의 상태를 갖지 않기 때문이다.

즉, 컴포넌트의 잦은 업데이트에도 effect 내부에서는 초기값을 갖고 있다는 것이다.

---

그럼 어쩌지!

deps 배열에 count를 넣어주면 된다.

 

이제 컴포넌트가 언마운트 되면 가지고 있던 count의 값을 로그에 잘 출력하는 것을 확인할 수 있다.

 

그런데, 또 문제가 생겼다.

 

요구사항은 언마운트 되었을 때에만 count의 값을 로깅하는 것이었다.

하지만, deps에 count를 넣음으로써 컴포넌트가 업데이트되기 직전에도 클린업 함수가 실행된다.

---

그럼 어쩌지! (2)

이전 포스팅에 작성했던 ref를 사용하면 된다.

ref는 컴포넌트의 렌더링과 무관한 값이다. 이를 이용해서 effect에서 최신 state 값을 ref에 갱신하고 언마운트 될 때에만 로깅하면 된다.

 

ref에 대한 상세한 내용은 이곳에서 확인할 수 있다.

 

2개의 useEffect를 사용하여 구현할 수 있다.

 

언마운트 될 때에만 출력할 수 있도록 빈 배열의 deps를 갖는 useEffect 한 개.

매 렌더링마다 변화하는 count 값을 countRef에 갱신하는 useEffect 한 개.

 

 

자, 이제는 언마운트 될 때만 최신의 count 값이 로깅됨을 확인할 수 있다.

 

너무 재밌다.

이상. 끝.