# React Native Library 설정

{% hint style="warning" %}
IMQABridge 추가 방법은 React Native를 이용하여 개발되는 케이스마다 달라질 수 있습니다.
{% endhint %}

## 1. Component 별 IMQA 설정

### 함수형 컴포넌트 설정

React Native 앱 성능 데이터 수집을 위해 Component 화면별로 IMQA 수집 코드를 삽입해주어야 합니다. 해당 수집 코드는 함수형 컴포넌트로 작성되었으며 부모 컴포넌트/ 자식 컴포넌트의 따라 설정이 달라 집니다. 제일 우선적으로 rendering이 이루어 지는 상위 컴포넌트 ( 부모 컴포넌트 ) 해당 컴포넌트에서 import 하여 사용되는 컴포넌트 ( 자식 컴포넌트 ) 를 구분하여 아래 설정을 맞게 적용이 되어야 합니다. 

* ( 부모 컴포넌트 )

{% code title="../components/MyComponent.tsx ( 부모 컴포넌트 ) " %}

```tsx
// MpmAgent import
import MpmAgent from ‘imqa-react-native-agent’; 

..

const MyComponent = () => {

.. 
useLayoutEffect(() => { 
  // 해당 설정은 화면의 rendering이 이루어 지기전에 호출되어야 하는 함수이므로 
  // 꼭 useLayoutEffect Hook 에서 적용 부탁 드립니다. 
  MpmAgent?.setBehaviorData("MyComponent"); 
}, []);

useEffect(() => {
  // useEffect 함수의 최상단에 위치해야 합니다. 
  MpmAgent?.startReactNativeRender("MyComponent",true); 
  ..

  // useEffect 함수의 최하단에 위치해야 합니다. 
  MpmAgent?.endReactNativeRender("MyComponent",true);
}, []);
..
} 
```

{% endcode %}

* ( 자식 컴포넌트 )

{% code title="../components/MyChildComponent.tsx ( 자식  컴포넌트 ) " %}

```tsx
// MpmAgent import
import MpmAgent from ‘imqa-react-native-agent’; 

..
const MyChildComponent = () =>

useEffect(() => {
  // useEffect 함수의 최상단에 위치해야 합니다. 
  MpmAgent?.startReactNativeRender("MyChildComponent", false); 

  ..

  // useEffect 함수의 최하단에 위치해야 합니다. 
  MpmAgent?.endReactNativeRender("MyChildComponent", false);
}, []);
```

{% endcode %}

### 클래스형 컴포넌트 설정

React Native 앱 성능 데이터 수집을 위해 Component 화면별로 IMQA 수집 코드를 삽입해주어야 합니다. 해당 수집 코드는 클래스형 컴포넌트로 작성되었으며 부모 컴포넌트/ 자식 컴포넌트의 따라 설정이 달라 집니다. 제일 우선적으로 rendering이 이루어 지는 상위 컴포넌트 ( 부모 컴포넌트 ) 해당 컴포넌트에서 import 하여 사용되는 컴포넌트 ( 자식 컴포넌트 ) 를 구분하여 아래 설정을 맞게 적용이 되어야 합니다. 

* ( 부모 컴포넌트 )

{% code title="../components/MyComponent.tsx ( 부모 컴포넌트 ) " %}

```tsx
// MpmAgent import
import MpmAgent from ‘imqa-react-native-agent’; 

..

class MyComponent extends React.Component {

..
 
 componentDidMount() {
  // componentDidMount 함수의 최상단에 위치해야 합니다. 
    MpmAgent?.setBehaviorData("MyComponent"); 
    MpmAgent?.startReactNativeRender("MyComponent", true); 
    
    ..

  // componentDidMount 함수의 최하단에 위치해야 합니다. 
    MpmAgent?.endReactNativeRender("MyComponent", true);
 }
..
} 
```

{% endcode %}

* ( 자식 컴포넌트 )

{% code title="../components/MyChildComponent.tsx ( 자식  컴포넌트 ) " %}

```tsx
// MpmAgent import
import MpmAgent from ‘imqa-react-native-agent’; 

..

class MyChildComponent extends React.Component {

..

 componentDidMount() {
  // componentDidMount 함수의 최상단에 위치해야 합니다. 
  MpmAgent?.startReactNativeRender("MyChildComponent", false); 
  ..

  // componentDidMount 함수의 최하단에 위치해야 합니다. 
  MpmAgent?.endReactNativeRender("MyChildComponent", false);
 }

..
}
```

{% endcode %}

## 2. Network 통신 설정 

### Axios 를 사용한 Network 통신 시 

Axios 라이브러리를 사용하여 Network 통신을 진행하시는 경우 interceptor를 구현하여 네트워크 통신 시 IMQA 수집 코드가 동작할 수 있도록 코드 삽입을 진행해주셔야 합니다. 

```
const axiosInstance = axios.create({
      baseURL:"http://sample-api"
    });
    axiosInstance.interceptors.request.use(
      (config) => {
        Try{
         // network 통신 수집 코드 
          MpmAgent?.startReactNativeNetwork( 
            config.baseURL?.toString(),
            config.url?.toString(),
            config.method?.toString(),
            config.baseURL?.split('://')[0]
          );
        }catch(e){
          console.error(e);
        }
        return config;
      },
      error => {
       // network 통신 시 오류가 발생했을때 아래와 같은형태로 status code를 넣어주셔야 합니다. 
        MpmAgent?.endReactNativeNetwork("500");
      }
    );
    axiosInstance.interceptors.response.use( response => {
      // network 통신 완료 시 status code를 넣어주셔야 합니다. 
      MpmAgent?.endReactNativeNetwork(response.status.toString());
      return response;
    });
```

### Fetch 를 사용한 Network 통신 시 

Fetch를 사용하여 Network 통신을 진행하시는 경우네트워크 통신 시 IMQA 수집 코드가 동작할 수 있도록 아래 형태로 코드 삽입을 진행해주셔야 합니다. 

```
let url = "http://sample-api";

// network 통신 시작 전 해당 코드가 적용 되어있어야 합니다.
  MpmAgent?.startReactNativeNetwork( 
      url,
     "/sample",
     "post",
     url?.split('://')[0]);

fetch(url)
  .then(response => {
    MpmAgent?.endReactNativeNetwork(response.status.toString());  
    return response;
  })
  .catch(error => {
    MpmAgent?.endReactNativeNetwork("500");  
  });

```


---

# 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.imqa.io/imqa-guide/installation/react-native/react-native-library.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.