코틀린에서 리액트 웹뷰(WebView) 띄우기

Hyun Jin·2024년 10월 8일

*ChatGPT 답변 백업

WebView를 사용하여 리액트 애플리케이션을 Android 앱에서 렌더링할 수 있습니다.
WebView는 네이티브 Android 앱과 웹 콘텐츠를 결합하는 데 매우 유용하며, React와 Android 간의 상호작용도 쉽게 구현할 수 있습니다.

1. Android 프로젝트 설정

1. WebView 사용 권한 설정

AndroidManifest.xml 파일에 인터넷 사용 권한을 추가합니다. 이 권한을 통해 앱이 네트워크에 연결되어 웹 페이지를 로드할 수 있게 합니다.

<uses-permission android:name="android.permission.INTERNET" />

2. WebView 컴포넌트 추가

Kotlin에서 WebView를 사용하여 React 웹 페이지를 렌더링하려면, activity_main.xml 레이아웃 파일에 WebView 컴포넌트를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

2. MainActivity.kt에서 WebView 설정

MainActivity.kt에서 WebView를 초기화하고, React 애플리케이션의 URL을 로드하는 코드를 작성합니다.

package com.example.reactwebview

import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // WebView 초기화
        val webView = findViewById<WebView>(R.id.webview)

        // JavaScript 사용을 활성화
        webView.settings.javaScriptEnabled = true

        // WebViewClient 설정 (이 설정을 하지 않으면 외부 브라우저가 열릴 수 있습니다)
        webView.webViewClient = WebViewClient()

        // React 웹 애플리케이션 URL 로드
        webView.loadUrl("https://your-react-app-url.com")
    }
}

3. WebView에 추가 설정

JavaScript 활성화: webView.settings.javaScriptEnabled = true는 웹 페이지 내에서 자바스크립트를 사용할 수 있도록 해줍니다. React는 자바스크립트로 렌더링되므로 필수 설정입니다.
WebViewClient 설정: webView.webViewClient = WebViewClient()를 설정하면, 클릭된 링크가 외부 브라우저 대신 WebView 내에서 열립니다.

4. 웹 페이지와 네이티브 상호작용 (Optional)

React 웹 페이지와 네이티브 Android 기능 간에 상호작용을 하려면, WebView에서 JavaScript 인터페이스를 설정할 수 있습니다. 이를 통해 JavaScript에서 Android 네이티브 코드를 호출할 수 있습니다.
JavaScript에서 Android.showToast("Hello from React!")를 호출하면 네이티브 Android의 showToast 함수가 실행됩니다.