[react-native] 화면이 mount 될 때 DeviceEventEmitter 동작하기

현재 상황

Screen에서 Modal로 이동할 때 해당 데이터 값을 넘겨줘야 하는 상황

 

이때 사용되는 state는 총 2개로
1. 모달을 열어주는 state

2. 데이터 값을 받는 state

이런 상황에서 값을 넘겨주는 방식은 2가지가 있다.

1. props로 전달

2. DeviceEventEmitter 사용

 

 

 

첫 번째 방식은 모달이 mount 됐을 때 상태 값을 2개를 관리해줘야해서 번거로운 반면,

두 번째 방식은 항상 모달이 listen중이니 2개의 state 관리가 필요 없고, 값을 전달 받을 수 있다.

 

---

 

Screen

import { DeviceEventEmitter } from 'react-native';

DeviceEventEmitter.emit('aaaa', data); // 넘기는 data

 

 

Modal

  import { DeviceEventEmitter } from 'react-native';

  useEffect(() => {
    const subscription = DeviceEventEmitter.addListener(
      'aaaa',
      (data: string) => {
        console.log(data); // data 넘겨 받기
      },
    );

    return () => {
      subscription.remove(); // 컴포넌트가 화면에서 사라지면 listener remove까지 해주자
    };
  }, []);