외부 링크 연결, 쿠키 연동: 웹뷰 기능 구현(1)

목록
1. [현재 글] 외부 링크 연결, 쿠키 연동: 웹뷰 기능 구현(1)
2. 더블 클릭 종료, 뒤로 가기: 웹뷰 기능 구현(2)

 

리액트 네이티브 웹뷰에서 외부 링크 연결, 쿠키 연동, 이전 버튼 3가지 기능을 구현했는데요.
어떻게 구현했는지 과정을 적어봤어요.

웹뷰를 처음 도입하는 분들에게 도움이 되면 좋은 마음으로 시작해 보겠습니다.

 

1. 외부 링크 연결

첫 번째 기능 구현은 외부 링크 연결이었어요.

외부 링크 연결은 웹뷰의 onNavigationStateChange 속성을 활용했어요. 해당 속성은 웹뷰에서 페이지를 이동하면 변경된 URI를 반환해요. 만약 변경된 URI가 외부 앱으로 실행하고 싶은 주소라면 Linking.openURL()* 메서드를 적용할 수 있어요. 그리고 링크를 누르면 웹뷰도 해당 URI로 이동하기 때문에 .stopLoading()* 메서드를 적용해야 웹뷰 화면이 넘어가지 않아요.

Linking.openURL(), 외부 앱에서 URL을 실행
.stopLoading(), 웹뷰 Ref 속성으로 화면 로딩 차단

// webview.tsx
<WebView
  ref={webviewRef}
  onNavigationStateChange={async (state) => {
    const url = state.url;
    
    // 특정 URI 조건 설정
    if (url.startsWith('https://github.com')) {
      // 페이지 이동 제한
      webviewRef.current?.stopLoading();
      // 외부 링크로 연결
      Linking.openURL(url);
    }      
  }}
/>

 

이전 버튼을 눌러 앱으로 돌아오면 한 가지 문제가 발생해요. 웹뷰 링크를 다시 누르면 외부 앱으로 연결되지 않아요.

이 문제는 웹뷰 화면과 현재 웹뷰의 URI가 일치하지 않아서 발생해요. 현재 URI를 이전 URI와 일치시켜서 해결할 수 있어요. .goBack()* 메서드를 사용하면 외부 앱에서 돌아와도 정상적으로 웹뷰를 이용할 수 있어요.

goBack(). 웹뷰 Ref 속성으로 이전 URI로 이동

// webview.tsx
<WebView
  ref={webviewRef}
  onNavigationStateChange={async (state) => {
    const url = state.url;
    
    // 특정 URI 조건 설정
    if (url.startsWith('https://github.com')) {
      // 페이지 이동 제한
      webviewRef.current?.stopLoading();
      // 추가된 코드 - 페이지 화면 이전 링크와 동기화
      webviewRef.current?.goBack();
      // 외부 링크로 연결
      Linking.openURL(url);
    }      
  }}
/>

 

 

2. 쿠키 연동

두 번째로 구현한 기능은 쿠키 연동이에요.

먼저, 배포한 사이트 접속 과정을 설명드릴게요. 첫 접속하면 Next.js action 파일로 쿠키를 설정해요. 접속한 웹 주소는 테이블 번호 값을 가지고 있어서 앉아 있는 테이블 번호 값이 정상인지 검증해요.

통과되면 'table' 이름으로 쿠키를 설정해요. 그리고 쿠키를 통해 페이지 이동을 미들웨어로 검증하고 있어요. 이로써 쿠키가 설정된 상태에서 주소창 수정으로 다른 테이블로 넘어가는 우회 접속을 번거롭게 하고 있어요. 만약 쿠키가 없거나 잘못된 주소로 접속했다면 404로 연결해요.

근데 웹뷰에서 페이지 이동을 시도하면 404 페이지로 연결되는 문제가 발생했어요. 웹뷰 통신*으로 쿠키를 전달받아서 콘솔 로그로 출력해 봤는데요. 첫 접속 때만 쿠키가 설정되고 페이지 이동 때는 쿠키가 'undefined'였어요. 웹뷰와 웹 쿠키 연동이 되지 않아서 발생하는 문제였어요.

웹뷰 통신, window.ReactNativeWebView.postMessage() 사용하면
웹뷰(네이티브)로 메시지를 전달할 수 있어요

웹뷰에서 쿠키를 설정하기 위해 Cookie Manager 라이브러리를 사용했어요. 리드미가 잘 작성되어 있어서 도입하는데 큰 어려움은 없을 거예요. 이미 미들웨어가 페이지 라우팅을 검증하고 있어서 웹뷰에서 페이지 이동을 중복 검증하지 않게 쿠키 값만 검증하도록 설정했어요. 그리고 쿠키 연동을 위해서 웹뷰의 sharedCookiesEnabled* 속성을 참으로 설정해야 해요.

// webview.tsx
<WebView
  onNavigationStateChange={async (state) => {
    const url = state.url;
    
    // webViewURI, 웹뷰 메인 페이지 주소
    if (url.startsWith(`${webViewURI}`)) {
      // tableName 여부 검증
      const urlArr = url.split('/');
      // 3번째 값, 테이블 번호 추출
      const tableName = urlArr.length > 2 ? urlArr[3] : undefined;
      // 테이블 번호 검증
      const isValide = checkValidTableValue(tableName);

      // tableName 쿠키 설정
      if (tableName && isValide) {
        setCookies({ url, tableName });
      }
    }   
  }}
/>

// setCookies.ts
async function setCookies({ url, tableName }: { url: string; tableName: string }) {
  // 쿠키 옵션 설정
  const cookies: Cookie = {
    name: 'table',
    value: tableName,
    path: '/',
    httpOnly: true,
  };
  
  // 쿠키 설정
  await CookieManager.set(url, cookies);
}

 

쿠키를 출력할 때 설정 값이 null이어도 놀라지 마세요. 출력만 기본 값일 뿐 쿠키는 정상적으로 작동해요. 해당 이슈는 여기서 확인할 수 있어요.

 

여기까지 외부 링크 연결과 쿠키 연동 과정에 대해 알아봤는데요.
이전 버튼 구현은 두 가지 기능을 가지고 있어서 다음 글에서 다루고 있어요.

더블클릭 종료, 뒤로 가기 기능을 가진 이전 버튼 구현은 다음 글에서 확인해 주세요.