[React native] 화면간 전환, Async Storage 불러오기 (feat. useFocusEffect)

앱을 만들때,

무언가를 로컬로 저장하고 싶으면 

간단한 경우 Async storage를 많이 이용한다.

App
┗ Home Screen
┗ Write Screen

1 2 3 4

type RootStackParamList = {     Home: undefined;     Write: undefined; }

cs

이런 구조의 앱에서 (나는 Native stack navigator를 사용했다.)

1. Write Screen 에서 글을 입력한다.
2. Async Storage 에 저장한다.
3. Home Screen 으로 돌아간다.
4. 업데이트 된 list를 보여준다.

Write에서 글을 작성하고 그걸 Async storage에 저장하는것까지 잘했지만,
Home Screen으로 돌아갔을때 다시 useEffect가 트리거 되지 않아서 고민을 많이 했다.

React Navigation에서 navigate 함수를 사용해
Home screen -> write screen으로 넘어간 경우에는

1

navigate("Write")

cs

Home Screen 위에 Write Screen 이 덮어지게 되고
그 후 Write Screen 에서 Home Screen으로 돌아오더라도 
useEffect가 트리거되지 않는다.

결론부터 말하자면 useFocusEffect를 사용하면 된다.

Hook 이름에서 바로 알수 있지만,
해당 스크린이 Focus를 가지게 되면 트리거 된다.
(처음 띄울때 + 다른 screen 이동 후 다시 돌아올때)

해당 hook안에서 Async Storage를 load 하면 된다.