React-Navigation & Lifecycle

 한동안 개발일지 작성을 못했다. 최근엔 뭔가를 새로 배우기 보다는 노가다의 연속이 많기 때문이다. 물론 개선해야할 부분은 매우매우 많지만 (응답 실패에 대한 분기라던가) 먼저 1차 완성본을 만드는게 우선이라 많은 부분을 그냥 넘어가고 있다.

 지금은 메인화면 index.js에서 화면을 벗어나면 스캔을 종료하는 로직을 구현하려고 한다. componentWillUnmount를 이용할 수 있을까 했는데, 그저 스크린이 넘어가는것이 unmount의 조건이 아닌것같다. 

 

 react-navigation document를 참고하니 의외로 매우 쉽게 해결됐는데, react-navigation 역시 나름의 lifecycle이 있어 다른 스크린으로 navigate 한다고 해당 스크린을 구성하던 component들이 unmount 되지는 않는다고 적혀있었다. 그 대신 스크린에 event listner를 추가해 focus, blur를 구분하는 식으로 side effect를 처리하는 방법이 제시되어 있다. 본 프로젝트는 하나의 컴포넌트를 마치 하나의 스크린처럼 생각하고 개발하고 있으므로, index.js를 다음과 같이 처리하였다.

    componentDidMount() {
        console.log('index.js componentDidMount')
        this.focusUnsubscribe = this.props.navigation.addListener('focus', () => {
            this.getBabilKeysList(this.props.User.uid);
        });
        this.blurUnsubscribe = this.props.navigation.addListener('blur', () => {
            this.props.terminateScan();
        })
    }

    componentWillUnmount() {
        this.focusUnsubscribe();
        this.blurUnsubscribe();
    }

Navigation events | React Navigation

https://reactnavigation.org/docs/navigation-events/#navigationaddlistener

Navigation lifecycle | React Navigation

https://reactnavigation.org/docs/navigation-lifecycle/