[React-native] useFocusEffect는 신이야!

개요

화면이 이동 되었음에도, 기존에 실행했던 기능들이 그대로 유지되는 경우가 많았다.

따라서
해당 Component가 포커싱 되었을 때, 작동하는 로직을 구현하려고 한다.

검색해보니 이러한 기능을 충족시켜주는 것이 바로 useFocusEffect였다.

화면에 포커싱 되면 작동하는 함수인 것이다…!

1. 사용을 위해 useFocusEffect를 import 해준다.

import { useFocusEffect } from "@react-navigation/native";

2. 사용법은 useEffect와 유사하다.

그러나 한 가지 다른 점이 있다면, useCallback으로 내용을 감싸줘야 한다는 점이다.

(그렇지 않으면 오류가 발생한다!)

useFocusEffect(
    useCallback(() => {
      //화면이 포커싱 되었을 때 실행시킬 내용을 작성
      return (
      	//화면에서 포커싱이 떠났을 때 실행시킬 내용을 작성
      );
    }, [])
  );

참고로 callback 내부에 바로 작성하면 화면이 포커싱 되었을 때 발생하고,
return문으로 내용을 작성하면 포커스가 사라질 때 발생하니 참고하자.

나는 화면이 포커싱 되었을 때,

• 화면의 default 설정 작성
• 바텀 시트 다시 띄우기

등에 사용 중이다.

비록 단순한 내용이지만 찾는데 고생했기 때문에…

기록용으로 슝슝