앱 종료 시 푸시 알림 클릭했을 때 초기 렌더링이 2번 발생하는 문제

 

문제

초기 렌더링이 2번 되는 문제 발생

https://github.com/erikras/react-redux-universal-hot-example/issues/429

componentDidMount called twice for initial load · Issue #429 · erikras/react-redux-universal-hot-example

dev 버전에서만 초기 렌더링을 2번 한다는데, 해제하려면?

-> production 환경을 만들면 되지!

 

https://dev.to/calintamas/how-to-manage-staging-and-production-environments-in-a-react-native-app-4naa

How to manage staging and production environments in React Native

 

 

Product -> Scheme -> Edit Scheme - Run - Info - Build Configuration을 Debug에서 Release로!

 

그러나 작동되지 않음.

 

다른 해결방법을 찾아보자.

https://devsoyoung.github.io/posts/react-usestate-double-invoked/

[React] useState를 사용한 함수형 컴포넌트는 왜 두 번 실행될까?

 

 

자... mount가 2번 되니까 할 수 있는 방법은

1. strict mode 해제하기 (react native엔 없는 것 같음. 못찾겠음. 해제 못 해.)

2. 그러면 production 환경을 만들어보자

  2-1. __DEV__ = false ---> 실패

  2-2. iOS에서 edit schema 해서 release 버전으로 뽑아보기 ---> 실패

  2-3. 테스트 플라이트에 올려보기 ---> 실패

3. react native push notification 에 navigate 어떻게 하는지 물어보기

 

firebase는 이렇게 가능한거같은데.

https://rnfirebase.io/messaging/notifications#handling-interaction

 

unmount의 원인

key 안써서? 그건 아니다. 

https://www.huy.dev/2017-01-avoid-unnecessary-remounting-react/

Avoid unnecessary remounting of DOM elements in React | huy.dev

 

 

드디어 해결!

 

안됐던 이유는 onNotification pushnoti config를 useEffect에 넣어서이고

앱 완전 종료 시에 푸시알림 클릭하면 이걸 실행할 때 mount가 되기 전이라 제대로 동작이 안되는거임.

그래서 constructor에서 세팅을 해주면 된다. (useEffect 안에 쓰지 말고)

 

이제 알게된 것!

1. React Native에는 strict mode 없고 2번 렌더링 되지 않는다.

2. mount 되기전에 뭔가를 하려고 하면 안되고 푸시알림 클릭해서 navigate 하고싶은 경우에는.... constructor 위치에 넣어준다.

 

해결!

 

참고) react-native-push-notification 버전 업데이트도 했음

3.3.1 -> 3.4.0