React Native에서 WebView를 Native처럼 사용해보자! (1)

진돌·2024년 10월 3일

React Native에서 WebView를 Native처럼 사용해보자!

목록 보기

1/3

안녕하세요. 프론트엔드 개발자 진돌입니다. React Native에 웹뷰 구성하면서 겪었던 여러가지 이슈들을 공유하면서 웹뷰 개발 가이드 시리즈를 작성해보려고 합니다.

먼저 이번 글에서는 발생한 이슈들을 공유해보도록 하겠습니다.

(대표적으로 사용하는 WebVIew 라이브러리는 react-native-webview 라이브러리가 있고, 저도 해당 라이브러리를 사용하여 개발하였습니다.)

일단 아래처럼 가장 기본적인 WebView만 실행했을 때 어떤 문제들이 있고 어떤 것들을 해결해야되는지 나열해보겠습니다.

 return (
    <WebView
        source={{ uri: `${URL}${path}` }}
      />
 )

기본적으로 앱에는 pull to refresh를 하면 화면이 갱신되는 이벤트를 사용하고 있습니다.

사용자가 앱에서 처럼 pull to refresh를 했는데 아무 이벤트가 발생하지 않습니다.

pull to refresh를 구현해줘야 합니다.

기본적으로 앱에서 화면을 pinch zoom event를 한다고 확대나 축소가 일어나지 않습니다.

그러나, 웹뷰 화면은 웹페이지를 그냥 그리다보니 해당 이벤트로 확대 축소를 발생시키고 있습니다.

확대 축소를 막아줘야 합니다.

기본적으로 앱에서는 화면 이동시에는 stack navigation으로 작동하여 깜빡거리면서 전환되는게 아니라 새로운 화면이 stack으로 쌓이게 됩니다.

그러나, 당연히 웹뷰에서는 페이지 전환이 되고 있습니다.

stack navigation을 사용하도록 해주어야 합니다.

앱에서 로그인을 하여 여러가지 서비스를 사용중에 웹뷰로 갔다고 다시 로그인을 해야된다면 최악입니다.

앱에 있는 token 정보를 웹뷰로 보내줘야 합니다.

웹뷰에서 앱 화면으로 전환해야되는 경우가 있습니다.
저같은 경우는 글쓰기 같은 경우는 웹뷰에서 제어하기보다 앱화면에서 동작을 제어하는게 편했고, 그 외에도 여러가지 앱과 엮이는 서비스인 경우도 있을 것입니다.

이런 경우에는 앱에서 새로은 스택 화면이 쌓이고 스택이 pop 될 때 돌아가서 invalid처리가 필요한 경우에는 앱에서 웹으로 refresh event를 보내줘야 합니다.

앱내 컨텐츠를 선택하여 복사 등을 할 수 있습니다.

실제 앱에서는 input이 아니면 text등을 선택하는 ux가 발생하지 않습니다.
선택하지 않도록 막아줘야 합니다.

안드로이드 ios 각각 input을 했을 때 스크롤 되거나 화면 밀리는 것에 있어서 차이가 있음

다음 글에서 이슈를 하나씩 해결한 내용을 공유해보도록 하겠습니다.