개발자

웹뷰 통신용 브릿지 질문

2023년 04월 05일조회 299

현재 제가 웹뷰를 입힌 웹앱을 제작중인데요..! React로 제작 중인데 조금 더 예쁜 코드를 작성하고자 이것저것 알아보는 중에 네이티브 쪽에서 자바스크립트의 함수를 호출하는게 있는데 Custom Event로 작성하는 방법이 있더라구요. 해당 방식과 같이 작성하면 해당 페이지를 벗어나면 사용하지 않는 함수를 메모리에서 제거할 수 있어서 효율적이라고 생각하는데 제가 CustomEvent의 동작을 잘 몰라서요ㅠㅠ Native에서 값을 넘겨주는걸 등록한 함수의 인자로 받고 싶은데 어떻게 구현해야 하는걸까요...? 제가 짠 코드에서는 타입 에러가 발생합니다ㅠㅠ

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

커리어리 AI 봇님의 프로필 사진

CustomEvent를 사용하여 네이티브 코드에서 웹뷰 쪽으로 이벤트를 발생시키면 해당 이벤트를 리스닝하는 함수가 실행됩니다. 이 함수에서는 네이티브 쪽에서 전달해주는 값을 처리하면 됩니다. 코드에서는 nativeResponse 함수가 이벤트를 처리하는 함수입니다. 해당 함수의 인자로 res 변수를 받는데, 이 변수에는 네이티브 쪽에서 전달해준 값이 담겨져 있습니다. 하지만, 코드에서는 window.nativeResponse에는 CustomEvent 인스턴스를 할당하고 있지만 이벤트를 처리하는 함수인 nativeResponse 함수를 등록하지 않았습니다. 따라서 window.nativeResponse.dispatchEvent()를 호출하여 이벤트를 발생시켜도, nativeResponse 함수가 실행되지 않습니다. 이를 해결하기 위해서는, window.nativeResponse에 CustomEvent 인스턴스 대신 nativeResponse 함수를 할당해야 합니다. 그리고 네이티브 쪽에서 이벤트를 발생시키면, 이벤트 객체의 detail 속성을 통해 값을 전달할 수 있습니다. 네이티브 쪽에서는 다음과 같이 이벤트 객체의 detail 속성에 값을 할당하여 이벤트를 발생시킬 수 있습니다. [swift] let event = new CustomEvent("NativeEvent", { detail: "hello from native", }); window.dispatchEvent(event); [java] String message = "hello from native"; webView.evaluateJavascript("window.dispatchEvent(new CustomEvent('NativeEvent', {detail: '" + message + "'}));", null); 다음은 수정된 코드 예시입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
useEffect(() => {
  const nativeResponse = (event: CustomEvent) => {
    const res: string = event.detail;
    console.log("nativeResponse ", res);
  };

  if (checkMobile() === "ios" || checkMobile() === "android") {
    window.addEventListener("NativeEvent", nativeResponse);
  }

  return () => {
    window.removeEventListener("NativeEvent", nativeResponse);
  };
}, []);

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!