[reactnative] goback 후에 useeffect가 작동하지 않음

참고

https://itecnote.com/tecnote/reactjs-useeffect-not-called-in-react-native-when-back-to-screen/

---

문제)

useEffect는 처음 렌더링될 때와 배열에 있는 변수가 바뀔 때 실행이 된다. 그러나 goback()이 되면서 이 스크린에 넘어왔을 때 이 useEffect가 실행되지 않고 있었다. 

 

해결)

useIsFocused는 스크린이 리렌더링되는 상황(포커스 될 때) true가 된다.

그래서 isFocused가 바뀔 때 useeffect가 실행될 수 있다.

import React, {useEffect, useState} from 'react';
import { useIsFocused } from '@react-navigation/native';

...

const [isLogin, setIsLogin] = useState(false);
const isFocused = useIsFocused();

  useEffect(() => {
    if(isFocused) {
      loadData();
    }
  }, [isFocused]);

  const loadData = async () => {
    await AsyncStorage.getItem('my-token')
      .then((value) => {
        if(value != null) {
          setIsLogin(true);
        }
      }).catch((err) => {
        console.log(err);
      })
  }