React-Navigation 화면 포커스 감지 문제 해결

 

🌸 TIL

 

 

 

 

 

 

 

💥 문제점

 

 

구현하던 기능 중에 A screen에서 B screen으로 navigate한 후, B screen에서 A screen으로 goBack했을 때 A screen에서 API 호출이나 재렌더링이 이루어져야 하는 상황이 생겼다.

 

다시 말해 B screen에서 useContext에 있는 상태 값을 변경하였고, goBack을 통해 A screen 으로 돌아왔을 때 변경된 값이 적용되어야 하기 때문에 재렌더링을 해야만 하는 것인데 goBack을 사용해야하기 때문에 A screen에서 재렌더링이 이루어지지 않고 있다.

 

 

---

🌈 해결 방안

 

 

react-navigation은 총 3가지 방법을 제공한다.

 

1. Listening to the 'focus' event with an event listener.
2. Using the useFocusEffect hook provided by react-navigation.
3. Using the useIsFocused hook provided by react-navigation.

 

 

이 3가지 방법 중 3번을 사용하여 해결하였다.

 

const isFocused = useIsFocused();
 
useEffect(() => {
  
  if (isFocused) console.log('Focused!!');
    
}, [isFocused]);
 

 

 

useIsFocused를 사용하여 useEffect 안에서 처리해주어도 좋고 useFocusEffect를 사용해주어도 좋을 것 같다.

이런 기능이 있는줄 모르고 씩씩대고 있었는데 구글링은 역시 신이야........

 

 

아! 구글링하다가 하나 더 알아낸 것은 만약 B screen에서 A screen 으로 왔을 때만 감지 해야하고 C screen에서 왔을 때는 감지하지 않아야 한다면 다음과 같은 방법도 있다고 한다.

 

 

github.com/react-navigation/react-navigation/issues/684

goBack detect stackNavigator · Issue #684 · react-navigation/react-navigation

 

 

 

---

 

 

마치며 🌸

 

전에는 안되는 것이 있으면 좌절하고 막막하고 어디에 물어보기 급급했는데 이제는 조금씩 구글링에 자신감이 생기고 다른 사람들에게 물어보는 횟수가 정말 많이 줄었다.

 

혼자 해결할 수 있는 힘이 길러지고 있는 것 같아서 뿌듯하고 이제는 어떠한 상황이 온다고 해도 전보다 덜 두렵고 좀 더 도전적으로 뛰어들고 있는 내 자신을 보게 되어 내가 너무 대견하다!

 

 

( 대견한 나를 위해서 오늘 저녁에는 상으로 맥주를 줘야겠다 헿 🤪 )