study: 리네다기 | 9장 - EventEmmitter 로 화면 간 흐름 제어

데이터를 수정하거나 삭제하였을 때 화면을 바로 변화시키려면
전역 상태로 데이터를 관리하거나

EventEmmitter 를 통해 이벤트 발생 시 데이터를 새로 불러오는 함수를 실행시키는 방법이 있다

이벤트를 사용하는 방식은 코드 추적이 어렵다는 단점이 있다

import EventEmitter3 from 'eventemitter3';

const events = new EventEmitter3();

위와 같이 이벤트 인스턴스를 생성할 수 있다

리액트 네이티브 프로젝트 안의 모든 컴포넌트 및 Hook에서 우리가 만든 인스턴스에 접근하려면 두 가지 방법이 있습니다.

첫 번째는 자바스크립트 코드 자체에서 export해주는 것이고, 두 번째는 Context를 만들어서 인스턴스를 하위 컴포넌트로 내려주는 것이죠. 첫 번째는 매우 간단한 방법, 두 번째는 정석인 방법입니다.

현재 상황에서는 EventEmitter 인스턴스 내에 이벤트가 딱 하나 필요하기 때문에 첫 번째 방법도 나쁘지 않습니다. 직접 export해줬을 때는 자동 완성도 잘 되고요. 따라서 우리는 바로 export해주겠습니다. 만약 인스턴스가 기능별로 여러 개 필요해지거나, Context를 통해 인스턴스를 관리하는 것이 마음에 든다면 Context를 만들어도 상관 없습니다.

이벤트 인스턴스를 생성하여 export

import EventEmitter3 from 'eventemitter3';

const events = new EventEmitter3();

export default events;

refresh 라는 이름으로 이벤트 등록

  useEffect(() => {
    events.addListener('refresh', onRefresh);
    return () => {
      events.removeListener('refresh', onRefresh);
    };
  }, [onRefresh]);

submit 시 refresh 이벤트 발생 시키기

  const onSubmit = useCallback(async () => {
    (...)
    events.emit('refresh');
    // TODO: 포스트 목록 새로고침
  }, [res, user, description, navigation]);