개발자
웹뷰 통신용 브릿지 질문
현재 제가 웹뷰를 입힌 웹앱을 제작중인데요..! React로 제작 중인데 조금 더 예쁜 코드를 작성하고자 이것저것 알아보는 중에 네이티브 쪽에서 자바스크립트의 함수를 호출하는게 있는데 Custom Event로 작성하는 방법이 있더라구요. 해당 방식과 같이 작성하면 해당 페이지를 벗어나면 사용하지 않는 함수를 메모리에서 제거할 수 있어서 효율적이라고 생각하는데 제가 CustomEvent의 동작을 잘 몰라서요ㅠㅠ Native에서 값을 넘겨주는걸 등록한 함수의 인자로 받고 싶은데 어떻게 구현해야 하는걸까요...? 제가 짠 코드에서는 타입 에러가 발생합니다ㅠㅠ
1useEffect(() => {
2 window.nativeResponse = new CustomEvent("NativeEvent");
3 const nativeResponse = (res: string) => {
4 console.log("nativeResponse ", res);
5 };
6
7 if (checkMobile() === "ios" || checkMobile() === "android") {
8 window.addEventListener("NativeEvent", nativeResponse);
9 }
10
11 return () => {
12 window.removeEventListener("NativeEvent", nativeResponse);
13 };
14 }, []);
답변 1
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); 다음은 수정된 코드 예시입니다.
1useEffect(() => {
2 const nativeResponse = (event: CustomEvent) => {
3 const res: string = event.detail;
4 console.log("nativeResponse ", res);
5 };
6
7 if (checkMobile() === "ios" || checkMobile() === "android") {
8 window.addEventListener("NativeEvent", nativeResponse);
9 }
10
11 return () => {
12 window.removeEventListener("NativeEvent", nativeResponse);
13 };
14}, []);커리어리 AI 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!