> For the complete documentation index, see [llms.txt](https://docs.hackle.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hackle.io/development-guide/react-native/webapp-integration/react-native-web-app-plugin-migration.md).
# 마이그레이션 가이드
`@hackler/react-native-webview-plugin` 의 최신 연동 방식으로 이전하는 방법을 안내합니다.
## 마이그레이션 절차
현재 사용중인 연동 방식에 해당하는 탭을 참고해주세요.
{% tabs %}
{% tab title="플러그인 1.x" %}
`createHackleWebViewConfig()` 와 `nativeConfig` prop으로 브릿지를 연동하고 있는 경우입니다.
{% stepper %}
{% step %}
**React Native SDK를 4.0.0 이상으로 업데이트합니다.**
`@hackler/react-native-sdk` 를 4.0.0 이상 버전으로 업데이트 합니다.
{% endstep %}
{% step %}
**플러그인을 2.0.0 이상으로 업데이트합니다**
`@hackler/react-native-webview-plugin` 를 2.0.0 이상 버전으로 업데이트 합니다.
{% endstep %}
{% step %}
**`createHackleWebViewConfig` 호출을 `HackleWebViewBridge` 로 교체합니다**
`createHackleWebViewConfig()` 호출과 `nativeConfig` prop을 삭제하고, `WebView`를 `HackleWebViewBridge`로 감싸주세요.
{% code title="변경 전 (1.x)" %}
```tsx
import { createHackleWebViewConfig } from '@hackler/react-native-webview-plugin';
function MyWebView() {
const hackleConfig = createHackleWebViewConfig({
automaticScreenTracking: true,
automaticEngagementTracking: true,
automaticRouteTracking: true,
});
return (
);
}
```
{% endcode %}
{% code title="변경 후 (2.0.0)" %}
```tsx
import { HackleWebViewBridge } from '@hackler/react-native-webview-plugin';
function MyWebView() {
return (
);
}
```
{% endcode %}
{% hint style="danger" %}
`HackleWebViewBridge`의 자식은 반드시 `WebView` 하나여야 합니다.
{% endhint %}
설정 옵션의 이름과 기본값은 1.x와 동일합니다. `false`로 설정해야 하는 옵션은 `automaticRouteTracking={false}` 와 같이 값을 명시해주세요.
{% endstep %}
{% step %}
**클린 빌드 후 연동을 확인합니다**
플러그인 업데이트 후 최초 빌드를 할 때는 반드시 클린 빌드를 실행해주세요.
{% endstep %}
{% endstepper %}
{% endtab %}
{% tab title="스크립트 방식" %}
`useHackleWebviewManager` hook과 JavaScript 브릿지 코드로 연동하고 있는 경우입니다.
React Native와 JavaScript 코드에 각각 브릿지 스크립트를 추가하는 [기존 웹앱 연동 방식](/development-guide/react-native/webapp-integration/react-native-web-app-intergration-deprecated.md)은 deprecate 되었습니다. 플러그인을 추가하는 방식으로 마이그레이션 하는 것을 권장드립니다.
{% hint style="info" %}
주요 변경사항
* React Native 단에서 스크립트 추가가 아닌 webview plugin 패키지 추가로 편리하게 관리할 수 있습니다.
* Javascript / React 단에 브릿지 스크립트를 추가할 필요가 없습니다.
* Javascript / React 단에서 hook을 재작성하지 않고 핵클 SDK에서 제공하는 hook을 사용할 수 있습니다.
{% endhint %}
{% hint style="warning" %}
React Native SDK 3.x를 사용중이라면 플러그인 1.x를, React Native SDK 4.x를 사용중이라면 플러그인 2.x를 설치해야 합니다.
React Native SDK 업그레이드 없이도 스크립트 방식에서 플러그인 방식으로 마이그레이션 할 수 있습니다.
{% endhint %}
{% stepper %}
{% step %}
**React Native에서 핵클 관련 스크립트와 코드를 삭제합니다**
기존에 제공되던 `useHackleWebviewManager.ts` 를 삭제합니다. 삭제하지 않으면 충돌이 발생할 수 있어 삭제를 권장합니다.
React Native WebView에 설정한 아래 핵클 관련 코드도 함께 삭제합니다.
* `useHackleWebviewManager` hook
* `injectedJavaScriptBeforeContentLoaded` prop
* `onMessage` handler
{% endstep %}
{% step %}
**Web에서 JavaScript 브릿지 코드를 삭제합니다**
기존에 제공되던 JavaScript 브릿지 코드를 삭제합니다.
Web에서는 브릿지 코드 삭제 외 작업할 것이 없습니다. 웹사이트는 핵클 JavaScript SDK를 그대로 사용하면 됩니다.
{% endstep %}
{% step %}
**플러그인을 설치하고 브릿지를 설정합니다**
[웹앱 연동](/development-guide/react-native/webapp-integration.md) 가이드를 참고하여 사용중인 React Native SDK 버전에 맞는 플러그인을 설치하고 브릿지를 설정합니다.
{% tabs %}
{% tab title="플러그인 2.x (React Native SDK 4.x)" %}
`WebView`를 `HackleWebViewBridge`로 감싸주세요.
```tsx
import { WebView } from 'react-native-webview';
import { HackleWebViewBridge } from '@hackler/react-native-webview-plugin';
function MyWebView() {
return (
);
}
```
{% endtab %}
{% tab title="플러그인 1.x (React Native SDK 3.x)" %}
`createHackleWebViewConfig()`로 생성한 config를 `WebView`의 `nativeConfig` prop에 전달해주세요.
```tsx
import { WebView } from 'react-native-webview';
import { createHackleWebViewConfig } from '@hackler/react-native-webview-plugin';
function MyWebView() {
const hackleConfig = createHackleWebViewConfig();
return (
);
}
```
{% endtab %}
{% endtabs %}
{% endstep %}
{% step %}
**클린 빌드 후 연동을 확인합니다**
플러그인 설치 후 최초 빌드를 할 때는 반드시 클린 빌드를 실행해주세요.
{% endstep %}
{% endstepper %}
{% endtab %}
{% endtabs %}
## 마이그레이션 연동 확인
위 작업이 완료된 후 React Native 앱에서 Web에 접속한 후 이벤트를 발생시켜주세요.
핵클 대시보드에서 수집된 이벤트를 확인하고, 수집된 이벤트의 SDK가 `react-native-sdk` 로 표시되면 정상적으로 연동이 된 것 입니다.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.hackle.io/development-guide/react-native/webapp-integration/react-native-web-app-plugin-migration.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.