React Navigation

useFocusEffect

공식 문서 1
useFocusEffect
이 hook을 사용하면 화면이 포커스 되었을때, 작업을 넣어줄 수 있다.
React Navigation 라이브러리에서 제공하는 훅(Hook)으로, 특정 화면(Screen)이 포커스를 얻었을 때(화면에 나타났을 때) 그리고 포커스를 잃었을 때(다른 화면으로 이동하거나 앱이 백그라운드로 갔을 때) 특정 사이드 이펙트(side effect)를 실행할 수 있게 해준다.
이는 React의 useEffect 훅과 유사하지만, 컴포넌트의 마운트/언마운트 대신 화면의 포커스/블러(blur) 상태에 반응한다는 점에서 차이가 있다.

일반적인 React 컴포넌트에서는 useEffect를 사용하여 컴포넌트가 마운트될 때 데이터를 가져오거나 이벤트 리스너를 설정하는 등의 작업을 한다. 하지만 React Navigation 환경에서는 다음과 같은 문제가 발생할 수 있다.
1. 화면 스택: React Navigation은 여러 화면을 스택 형태로 관리한다. A 화면에서 B 화면으로 이동하면 B 화면이 A 화면 위에 쌓인다. 이때 A 화면은 "언마운트"되지 않고 여전히 스택에 남아있을 수 있다.
2. 데이터 무효화: 만약 A 화면에서 useEffect를 사용해 데이터를 가져오고, B 화면으로 이동하여 데이터를 변경한 후 다시 A 화면으로 돌아왔다고 가정해 보자. A 화면은 언마운트되지 않았으므로 useEffect가 다시 실행되지 않을 수 있고, 결과적으로 A 화면에는 오래된(stale) 데이터가 표시될 수 있다.
useFocusEffect는 이러한 문제를 해결한다. 화면이 스택에서 다시 활성화될 때마다(즉, 포커스를 얻을 때마다) 코드를 실행하여 항상 최신 데이터를 표시하거나 필요한 작업을 수행할 수 있도록 한다.