[RN] React Navigation의 lifecycle과 useFocusEffect

[RN] React Navigation의 lifecycle과 useFocusEffect

Navigation lifecycle

React navigation을 사용하면 Home 화면을 기준으로 다른 화면으로 넘어갈 수 있습니다. 만약 Home에서 Detail 화면으로 넘어갔다면 그 동안 Home 화면은 어떻게 될까요?

공식 문서에 따르면 우리가 Detail 화면에 있는 동안 Home 화면은 사라지지 않고 그대로 남아있다고 합니다. 즉, Detail에서 Home으로 돌아오면 Home이 새로 고침 되는 게 아니라 Detail 화면에 가려져있다가 그냥 보이는 겁니다. 만약 홈 화면에 돌아올 때마다 어떤 함수를 실행하고 싶어서 useEffect를 사용했다면 앱을 처음 시작할 때 말고는 실행되지 않습니다. 그 대신 useFocusEffect를 사용하라고 하네요.

useFocusEffect

기본 구조는 다음과 같습니다.

import { useFocusEffect } from '@react-navigation/native'; function Home() { const [data, setData] = React.useState(null); useFocusEffect( React.useCallback(() => { // 화면이 focus 되면 실행하고 싶은 코드 return () => { // 화면이 unfocus 되면 실행하고 싶은 코드 }; }, [data]) ); return (...); }

useFoucsEffect는 useEffect와 크게 다른 점이 없습니다. 한 가지 해당 화면으로 돌아올 때마다(focus될 때마다) 실행되는 거 말고는요. useCallBack을 사용해서 data 값이 바뀔 때만 함수가 실행되도록 합니다. return 다음에는 화면에서 벗어날 때 실행하고 싶은 코드를 적습니다.

이렇게 하면 Home 화면에 올 때마다 업데이트 된 data를 사용할 수 있습니다..! (만세)

[참고 자료]

from http://seyeon.tistory.com/40 by ccl(S) rewrite - 2021-12-29 12:27:02