그다음에는 시뮬레이터에서 리로딩해보세요. 그러면 Metro Bundler가 실행 중인 터미널에서 다음과 같이 출력될 것입니다.

LOG      mounted

이제 Detail 1 열기 버튼을 눌러보세요. 터미널에 unmounted가 나타나지 않죠? 그리고 뒤로가기를 했을 때 mounted가 또 다시 나타나지 않는 것을 확인해보세요.

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

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

useCallback은 컴포넌트 내부에서 함수를 만들 때, 새로 만든 함수를 사용하지 않고 이전에 만든 함수를 다시 사용하도록 만들어줍니다. 그리고 그 함수 내부의 로직에서 의존하는 값이 있다면 의존하는 값이 바뀌었을 때 함수를 교체할 수 있도록 해줍니다. 지금 당장은 이러한 Hook 함수가 있다는 것 정도만 알아두세요. 어떤 상황에 이 Hook을 사용해야 유용한지는 추후 더 자세히 알아보겠습니다.

HomeScreen을 다음과 같이 수정해보고 Detail 1 열기 버튼을 눌렀다가 뒤로 가보세요.