<aside> 💡 이 글은 React Native 앱에서 Next.js 웹뷰를 사용하는 프로젝트 코드를 기반하였습니다. 기존의 Next.js의 useRouter를 사용한 라우팅 방식에서 React Native의 StackActions을 사용한 라우팅 방식으로의 마이그레이션 과정을 다룹니다.

</aside>

1. Intro

기존에는 NextJS에서 제공하는 **useRouter**와 Link 태그를 활용해 페이지 라우팅을 진행했습니다.

기존 Next.js 라우팅 하던 방식

특히 아이폰에서는 페이지 이동 시 애니메이션이 부자연스러웠습니다. 이 문제를 해결하기 위해 React Native에서 페이지 이동을 관리하는 React Navigation을 도입했습니다. 구현 방법은 아래와 같습니다.

2. 코드로 살펴보기

1) 앱 내 웹뷰에서 페이지 이동 버튼 클릭 시, 웹에서 앱으로 신호 전달

// src/hooks/useAppRouter.ts
const useAppRouter = () => {
    const isApp = getIsApp();
    const push = (path: string, scroll?: boolean) => {
        if (isApp)
            return sendMessageToReactNative({
                type: "ROUTER_EVENT",
                data: {
                    path,
                    type: "push",
                },
            });
        return router.push(path, { scroll });
    };
    return { push };
};

웹과 앱 환경을 구분하여 각각 적합한 라우팅 방식을 적용했습니다. 웹 환경에서는 기존의 Next.js의 **useRouter**를, 앱 환경에서는 앱에 메시지를 전송하는 방식을 사용합니다.

• **sendMessageToReactNative**는 웹에서 앱으로 메시지를 전송하는 함수입니다.
• **getIsApp**은 사용자가 접속한 환경이 웹인지 앱인지 판단하는 함수입니다.
• push 외에도 back, replace, refresh 메소드를 포함한 전체 코드는 별도로 확인해주세요.

위에서 만든 useAppRouter훅은 아래와 같이 useRouter처럼 사용하면 됩니다.

'use client';
export default function App(){
	const router = useAppRouter();
	const handleButton = () => {
		router.push("/profile");
	}
	return (
		<Button onClick={handleButton}>프로필 페이지로 이동</Button>
	)
}

2) 앱에서 StackActions.push() 메서드를 이용해 새 스택 생성

// components/MainNavigator.jsx
export default function MainNavigator(){
	return (
		<NavigationContainer>
			<Stack.Navigator>
				<Stack.Screen name="WebViewContainer" component={WebViewContainer} />
			</Stack.Navigator>
		</NavigationContainer>
	)
}

// components/WebViewContainer.jsx
export default function WebViewContainer({navigation,route}){
	const requestOnMessage = event => {
		const nativeEvent = JSON.parse(event.nativeEvent.data);
		const {type,data} = nativeEvent;
		switch (type){
			case "ROUTER_EVENT":{
				const {path,type} = data;
				switch (type){
					case "PUSH":
						const pushAction = StackActions.push('WebViewContainer',{
							url:`${SOURCE_URL}${path}`
						});
					navigation.dispatch(pushAction);
					break;
					// ..
				}
			}
		}
	}
			// ..
	return (
		<WebView 
			// ..
			onMessage={requestOnMessage}			
		/>)
}

React Native에서 페이지를 스택으로 관리하기 위해 Stack Navigation을 사용합니다. StackActions.push를 통해 새로운 페이지 이동을 처리합니다. **WebView**의 onMessage는 웹뷰에서 보낸 메시지를 처리할 수 있도록 합니다.