# 마이그레이션 가이드

기존 helper 스크립트를 이용하여 웹앱을 사용 중인 경우 플러그인을 추가하는 새로운 방식으로 마이그레이션 하는 것을 권장드립니다.

마이그레이션은 React Native와 Web에 추가한 스크립트를 삭제하고, React Native에 `@hackler/react-native-webview-plugin`을 추가하면 완료됩니다.

{% hint style="info" %}
주요 변경사항

* React Native 단에서 스크립트 추가가 아닌 webview plugin 패키지 추가로 편리하게 관리할 수 있습니다.
* Javascript / React 단에 브릿지 스크립트를 추가할 필요가 없습니다.
* Javascript / React 단에서 hook을 재작성하지 않고 핵클 SDK에서 제공하는 hook을 사용할 수 있습니다.
  {% endhint %}

### React Native

1. 기존에 제공되던 `useHackleWebviewManager.ts` 를 삭제합니다.

   삭제하지 않으면 충돌이 발생할 수 있어 삭제를 권장합니다.
2. React Native WebView에 설정한 핵클 관련 코드를 삭제합니다.
   1. `useHackleWebviewManager` hook
   2. `injectedJavaScriptBeforeContentLoaded` prop
   3. `onMessage` handler
3. [웹앱 연동](broken://pages/rwmmt43ZbuVoLFenKauB) 가이드를 참고하여 플러그인을 설치하고 웹뷰 브릿지를 설정합니다.
4. 플러그인 설치 후 최초 빌드를 할 때는 반드시 클린 빌드를 실행해주세요.

### Web

1. 기존에 제공되던 JavaScript 브릿지 코드를 삭제합니다.

   Web에서는 브릿지 코드 삭제 외 작업할 것이 없습니다.

### 마이그레이션 연동 확인

위 작업이 완료된 후 React Native 앱에서 Web에 접속한 후 이벤트를 발생시켜주세요.

핵클 대시보드에서 수집된 이벤트를 확인하고, 수집된 이벤트의 SDK가`react-native-sdk` 로 표시되면 정상적으로 연동이 된 것 입니다.

#### 연동방식 별 호환성 맵

<table><thead><tr><th width="200">React Native</th><th width="220">Web (Javascript)</th><th width="100">연동 여부</th></tr></thead><tbody><tr><td>스크립트 추가 방식</td><td>작업 X (or 브릿지 코드 삭제)</td><td><strong>X</strong></td></tr><tr><td>스크립트 추가 방식</td><td>스크립트 추가 방식</td><td><strong>O</strong></td></tr><tr><td>웹뷰 플러그인 추가 방식</td><td>작업 X (or 브릿지 코드 삭제)</td><td><strong>O</strong></td></tr><tr><td>웹뷰 플러그인 추가 방식</td><td>스크립트 추가 방식</td><td><strong>O</strong></td></tr><tr><td>작업 X</td><td>스크립트 추가 방식</td><td><strong>X</strong></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hackle.io/development-guide/react-native/webapp-integration/react-native-web-app-plugin-migration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.