[RN]useFocusEffect

useFocusEffect

useFocusEffect는 화면에 포커스가 잡혔을 때 특정 작업을 할 수 있게 하는 Hook이다.
만약 Homescreen에서 DetailScreen을 띄운다면 HomeScreen이 화면에서 사라지는 게 아니라, HomeScreen 위에 DetailScreen을 쌓아서 보여주는 것이다.
그리하여 useEffect를 통해 컴포넌트가 마운트되거나 언마운트될때 콘솔에 텍스트를 출력한다면 DetailScreen을 띄울 때 컴포넌트가 언마운트되지 않고 또 뒤로가기하여 HomeScreen으로 돌아왔을 때 컴포넌트가 마운트되지 않는 것을 확인할 수 있다.

만약 다른 화면을 열었다가 돌아왔을 때 특정 작업을 하고 싶다면
useFocusEffect 훅을 사용해야한다. 또 현재 화면에서 다른 화면으로 넘어갈 때 특정 작업을 하고 싶다면 useFocusEffect에서 함수를 생성해서 반환하면 된다.

useFocusEffect는 반드시 useCallback과 같이 사용해야한다.
만약 useCallback을 사용하지 않으면 컴포넌트가 리렌더링될 때마다 useFocusEffect에 등록한 함수가 호출될 것이다.

useCallback은 컴포넌트 내부에서 함수를 생성할 때, 새로 만든 함수를 사용하지 않고 이전에 만든 함수를 다시 사용하도록 해준다. 그리고 그 함수 내부의 로직에서 의존하는 값이 있다면 의존하는 값이 바뀌었을 때 함수를 교체할 수 있도록 해준다.

  useFocusEffect(
    useCallback(()=>{
      console.log('이 화면을 보고 있다.');
      return () => {
        console.log('다른 화면으로 넘어갔다.');
        
      }
    },[])
  )

출처 및 참고 : 리액트네이티브를 다루는 기술