React Navigation 에서 nesting navigation 사용 시
OS 별 렌더링 차이가 있었다
Android 의 경우 네비게이션 탭 접근 시
해당 탭에 등록되어있는 각걱 stack 의 default 페이지가
한 번씩 전부 렌더링 된 후 캐싱이 된다
top 1 - middle 3 - bottom 3 의 중첩 네비게이션이 있다고 가정하면
top 1 번 탭에 접근 시
1-1-1, 1-2-1, 1-3-1 이렇게 세 개의 네비게이션이 전부 렌더링 되는 것 같다
iOS 의 경우 1-1-1 만 렌더링 된다
위 경우 webview 통신으로 모달을 띄울 때 큰 문제가 되었는데
Android 에서만 3회의 postMessage 가 가기 때문에
한 번 요청에 3가지의 응답을 onMessage 하게 된다
이 경우는 기능상 굉장히 큰 문제가 되기 때문에
react navigtaion 의 useIsFocused 를 사용하여
isFocused 된 곳만 렌더링 하도록 하여 해결..
import { useIsFocused } from '@react-navigation/native';
if (!isFocused) return null;