React Native Library 설정

IMQABridge 추가 방법은 React Native를 이용하여 개발되는 케이스마다 달라질 수 있습니다.

1. Component 별 IMQA 설정

함수형 컴포넌트 설정

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

• ( 부모 컴포넌트 )

../components/MyComponent.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);
}, []);
..
} 

• ( 자식 컴포넌트 )

../components/MyChildComponent.tsx ( 자식 컴포넌트 )

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

..
const MyChildComponent = () =>

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

  ..

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

클래스형 컴포넌트 설정

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

• ( 부모 컴포넌트 )

../components/MyComponent.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);
 }
..
} 

• ( 자식 컴포넌트 )

../components/MyChildComponent.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);
 }

..
}

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");  
  });