내가 만드는 앱의 "화면 전환 흔적"을 자동화 하기

"화면 전환 흔적"

내가 만드는 앱에서는 화면을 전환할 때마다 자동으로 로그가 찍히도록 하는 함수를 제공하고 있다.

코드를 작성해보자.

---

파일경로: /src/ui/hooks/useNavigationLogger.ts

---

// src/navigation/useNavigationLogger.ts

import {useRef} from 'react';

import {NavigationContainerRef} from '@react-navigation/native';

import {getAnalytics} from '@react-native-firebase/analytics';

import {MixpanelEvents, trackMixpanelEvent} from '@/shared/mixpanel';

export const useNavigationLogger = <T extends {}>() => {

const navigationRef = useRef<NavigationContainerRef<T>>(null);

const navigationRouteNameRef = useRef<string | undefined>(undefined);

const handleReadyNavigation = () => {

const currentRoute = navigationRef.current?.getCurrentRoute();

navigationRouteNameRef.current = currentRoute?.name;

};

const handleStateChangeNavigation = async () => {

const previousRouteName = navigationRouteNameRef.current;

const currentRoute = navigationRef.current?.getCurrentRoute();

const currentRouteName = currentRoute?.name;

if (previousRouteName !== currentRouteName && currentRouteName) {

await getAnalytics().logScreenView({

screen_name: currentRouteName,

screen_class: currentRouteName,

});

trackMixpanelEvent(MixpanelEvents.screen_view, {

screen: currentRouteName,

});

}

navigationRouteNameRef.current = currentRouteName;

};

return {

navigationRef,

handleReadyNavigation,

handleStateChangeNavigation,

};

};

---

이제 이 파일 내용을 그대로 hbs 파일을 만들고 템플릿 코드에 넣어준다.

---

파일경로: /src/automationReactNative/index.ts

---

...

const fileInfoList: FileInfo[] = [

...

{path: 'src/ui/hooks', name: 'useNavigationLogger', ext: 'ts'},

...

];

...

---

이제 코드를 실행해 본다.

잘 생성되었다!

이제 사용자 데이터도 생각없이 사용할 수 있겠지 ...