RN) Screen 이동 시 useEffect 내부의 cleanUp Function이 적용되지 않는다면? (React Navigation)

React Navigation을 사용한다면 다른 스크린으로 이동할 때 이전 스크린을 unMount처리하지 않습니다.
그렇기 때문에 이전 스크린의 스크립트 내부에서 useEffet의
cleanUp function을 작성하여도 실행되지 않습니다.

그 대신 React Navigation에서 제공하는 useFocusEffect를 사용하여 스크린 이동 시 이전 스크린의 이벤트를 제거할 수 있습니다.

React Navigation은 이벤트를 구독하는 화면 구성 요소에 이벤트를 내보냅니다. Focus 및 Blur 이벤트를 수신하여 각각 화면이 초점을 맞추거나 초점이 맞지 않는 시기를 알 수 있습니다.

실행 불가 예시

  useEffect(() => {

    const timer = setInterval(() => {
      setSeconds(prev => prev +1);
    },1000)
    // 스크린을 이동하여도 unmount 되지 않기에, clearInterval은 작동하지 않습니다.
    return () => clearInterval(timer);
  },[])

useFocusEffect 사용으로 해결하는 예시

  useFocusEffect(
    useCallback(() => {
      const timer = setInterval(() => {
        setSeconds(prev => prev +1);
      },1000)

      return () => clearInterval(timer);
    },[])
  )

useCallback을 사용하는 이유?

Note: To avoid the running the effect too often, it's important to wrap the callback in useCallback before passing it to useFocusEffect as shown in the example.

적용하려는 Effect가 자주 실행되는 것을 방지하려면 예제에 표시된 대로 콜백을 useFocusEffect에 전달하기 전에 useCallback으로 래핑하는 것이 중요하다고 합니다.