[React Native] react-navigation 화면이 포커스되었을 때를 감지하기 & 특정 화면에서 돌아왔을 때 api 호출하기

1. To Do

A screen에서 B screen으로 navigate한 후 다시 A로 goBack했을 때 goBack한 순간 A screen에서 api 호출을 다시 해야한다.

(C screen에서 A screen으로 오면 아무것도 하지 않는다)

 

2. How To

2-1. react navigation 활용 (해결책x)

https://reactnavigation.org/docs/function-after-focusing-screen/

React Navigation

 

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.

이 중에 react-navigation은 2번을 추천해서 2번을이용해보았다. 스낵 예제를 참고

Try this example on Snack

Snack - React Native in the browser

그러나 C screen에서 A screen에서 왔을 때도 감지를 하므로 이건 해결책이 될 수 없다!

 

 

2-2. DeviceEventEmitter 활용 (해결책 o)

 

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

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

A screen에서 api를 재호출하는건 B screen에서 A screen으로 왔을 때만 진행되어야 하므로 DeviceEventEmitter가 더 적당하다.

 

- A screen

  import React, { useEffect } from 'react';
  import { DeviceEventEmitter } from 'react-native';

  useEffect(() => {
    DeviceEventEmitter.addListener('abc', () => {
      alert('A screen from B screen')
    })
  }, []);

 

- B screen

  import React, { useEffect } from 'react';
  import { DeviceEventEmitter } from 'react-native';

  useEffect(() => {
    return () => {
      DeviceEventEmitter.emit('abc');
    }
  }, []);
  
  

 

이렇게 하면 B screen이 unmount 될 때 A screen에서 등록해놓은 리스너가 동작하고, C screen에서 A screen으로 왔을 때 emit을 하지 않기 때문에 내가 의도한대로 동작한다!