# React Native의 배너 통합

> 설정, 초기화 및 리스너 설정 등 레벨플레이 SDK를 사용하여 React Native 앱에 배너 광고를 구현합니다.

배너는 정적 광고 또는 애니메이션 광고 중 하나일 수 있는 직사각형 시스템 기반 광고로, 라이브 앱 콘텐츠 주위에 지정된 영역 게재됩니다. 

> **Note:**
>
> 이 기술 자료는 SDK 8.4.0 이상에 해당합니다.

## 필수 조건##prerequisites

* 레벨플레이 React Native SDK를 앱에 올바르게 통합했는지 확인합니다. 통합은 [여기](/grow/levelplay/sdk/react/plugin-integration.md) 설명되어 있습니다.
* 레벨플레이 초기화 API 사용하여 SDK를 초기화해야 합니다.
* 레벨플레이 대시보드에서 AdUnitID를 찾습니다.

## 배너 광고 오브젝트 생성 및 크기 설정##create-banner-ad-object-and-set-size

배너 광고 오브젝트의 생성은 **onInitSuccess** 콜백을 수신한 후에 수행해야 합니다.

```js
import {
  LevelPlayBannerAdView,
  LevelPlayAdSize,
  type LevelPlayBannerAdViewMethods,
  type LevelPlayBannerAdViewListener,
} from 'Mediation

const bannerAdViewRef = useRef<LevelPlayBannerAdViewMethods>(null);
const adSize = LevelPlayAdSize.BANNER; // or await LevelPlayAdSize.createAdaptiveAdSize() for adaptive
const listener = { /* LevelPlayBannerAdViewListener */ };
const loadAd = useCallback(() => {
    bannerAdViewRef.current?.loadAd();
}, []);
return (
    <LevelPlayBannerAdView
        ref={bannerAdViewRef}
        adUnitId="YOUR_AD_UNIT_ID"
        adSize={adSize}
        placementName="YOUR_PLACEMENT"
        listener={listener}
        style={{ width: adSize.width, height: adSize.height }}
    />
);
```

### 배너 크기##banner-sizes

| LevelPlayAdSize   | 설명                                                 | dp 단위의 측정 항목(너비 X 높이) |
| ----------------- | -------------------------------------------------- | --------------------- |
| 배너                | 표준 배너                                              | 320 x 50              |
| 대규모               | 대형 배너                                              | 320 x 90              |
| MEDIUM\_RECTANGLE | 중간 직사각형(MREC)                                      | 300 x 250             |
| 적응적               | 모바일 및 태블릿의 크기 및 방향, 방향 설정 조정하기 위해 광고를 자동으로 렌더링합니다. | 기기 너비 X 권장 높이         |

광고 크기를 생성하려면 다음 옵션 중 하나를 따르십시오.

**화면 너비에 맞게 조정되는 적응적 광고 크기(권장):** 이 옵션은 기기 유형에 따라 배너 또는 LEADERBOARD를 반환하므로 "SMART" 통합을 대체합니다. 적응적 기능을 지원하는 네트워크(Google, Yandex)는 최적화 로직에 따라 높이를 반환합니다.

```js
let adSize = await LevelPlayAdSize.createAdaptiveAdSize();
```

**고정 너비 광고 크기를 사용한 적응적 광고 크기:** 이 옵션을 사용하면 특정 너비를 설정할 수 있습니다. 적응적 배너 기능을 지원하는 네트워크(Google, Yandex)는 제공된 너비를 기반으로 최적화 로직을 기반으로 높이를 반환합니다. 다른 모든 네트워크는 제공된 너비에 따라 폴백 크기(배너 또는 리더보드)를 반환합니다.

```js
let adSize = await LevelPlayAdSize.createAdaptiveAdSize(400);
```

**특정 배너 크기:** 이 옵션을 사용하면 배너 크기를 구체적으로 설정할 수 있습니다. 배너, 대형, 중형.

```js
let adSize = LevelPlayAdSize.MEDIUM_RECTANGLE;
```

### Placements##placements

우리는 보고만을 위한 배너에 있는 [플레이스먼트를](/grow/levelplay/platform/settings/placements.md) 지원합니다. 모든 재로드된 광고에 영향을 주기 위해 플레이스먼트는 **loadAd** 이전에 설정해야 합니다.

## 배너 리스너 설정##set-banner-listener

코드에 **LevelPlayBannerAdViewListener를 구현**하여 광고 전송에 대해 알 수 있습니다.

* 배너 광고를 로드하기 전에 리스너를 설정하는 것이 좋습니다.
* 각 배너 광고에는 자체 리스너 구현이 있어야 합니다.
* 콜백은 메인 스레드 실행됩니다.

```js
const 리스너: LevelPlayBannerAdViewListener = {
    onAdLoaded: (adInfo: LevelPlayAdInfo) => {
      // Invoked each time a banner was loaded. 새로 고침 또는 매뉴얼 로드.
    },
    onAdLoadFailed: (error: LevelPlayAdError) => {
     // Invoked when the banner loading process has failed.
     // This callback will be sent both for manual load and refreshed banner failures.
    },
    onAdDisplayed: (adInfo: LevelPlayAdInfo) => {
     // Notifies the screen is displayed.
    },
    onAdDisplayFailed: (adInfo: LevelPlayAdInfo, error: LevelPlayAdError) => {
     // Notifies the screen failed to display.
    },
    onAdClicked: (adInfo: LevelPlayAdInfo) => {
     // Invoked when end user clicks on the banner ad.
    },
    onAdExpanded: (adInfo: LevelPlayAdInfo) => {
     // Ad is opened on full screen
    },
    onAdCollapsed: (adInfo: LevelPlayAdInfo) => {
     // Ad is restored to its original size
    },
    onAdLeftApplication: (adInfo: LevelPlayAdInfo) => {
     // Invoked when the user left the app.
    },
};
```

## 배너 광고 로드##load-banner-ad

배너 광고를 로드하려면 **loadAd를** 사용하십시오.

```js
// Load the banner ad
bannerAdViewRef.current?.loadAd();
```

## 배너 새로고침 일시 정지 및 재개##pause-and-resume-banner-refresh

새로고침 값이 플랫폼에서 정의된 경우 코드에서 배너 새로고침을 일시 정지할 수 있습니다. 배너 광고의 자동 새로고침을 중지하거나, 일시 중지한 후 다시 활성화하다, 사용 가능하다. 

> **Note:**
>
> 배너 다시 표시되면 배너가 일시 정지된 시점부터 새로고침까지의 시간을 완료합니다. 

* **pauseAutoRefresh** – 배너 광고의 자동 새로고침을 일시 중지합니다.
* **resumeAutoRefresh** – 배너 광고가 일시 중지된 후 배너 광고의 자동 새로고침을 재개합니다.

```js
// Pause refresh 
bannerAdViewRef.current?.pauseAutoRefresh(); 
// Resume refresh
bannerAdViewRef.current?.resumeAutoRefresh();
```

## 배너 광고 삭제##destroy-banner-ad

배너를 파괴하려면 **파괴** 메서드를 호출합니다.

삭제된 배너 더 이상 표시할 수 없습니다. 더 많은 광고를 표시하려면 새 **LevelPlayBannerAdView** 오브젝트를 만드십시오. 

```js
bannerAdViewRef.current?.destroy();
```

## 배너 광고의 전체 구현 예시##full-implementation-example-of-banner-ads

다음은 표준 배너 크기를 사용하여 배너 광고를 생성하고 로드하는 예제입니다.

```js
import {
  LevelPlayBannerAdView,
  LevelPlayAdSize,
  type LevelPlayBannerAdViewMethods,
  type LevelPlayBannerAdViewListener,
  type LevelPlayAdInfo,
  type LevelPlayAdError,
} from 'Mediation

// Start of some component ...
const bannerAdViewRef = useRef<LevelPlayBannerAdViewMethods>(null);
const adSize = LevelPlayAdSize.BANNER
const 리스너: LevelPlayBannerAdViewListener = {
    onAdLoaded: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdLoadFailed: (error: LevelPlayAdError) => {
        // Implement your logic here
    },
    onAdDisplayed: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdDisplayFailed: (adInfo: LevelPlayAdInfo, error: LevelPlayAdError) => {
        // Implement your logic here
    },
    onAdClicked: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdExpanded: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdCollapsed: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdLeftApplication: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here
    },
};
return (
    <LevelPlayBannerAdView 
        ref={bannerAdViewRef}
        adUnitId={'YOUR_AD_UNIT_ID'}
        adSize={adSize}
        placementName={'YOUR_PLACEMENT'}
        listener={listener}
        onLayout={(_) => bannerAdViewRef.current?.loadAd()}
        style={width: adSize.width, height: adSize.height}} // 실제 배너 레이아웃 크기를 가져옵니다.
      />
);
  
// End of component ... 
```

## 레벨플레이 Mediation 데모 앱##levelplay-mediation-demo-app

통합 데모 애플리케이션 앱에 배너 배너 유닛 API를 통합하는 방법을 보여 줍니다.

[React 네이티브 데모 애플리케이션 다운로드](https://github.com/ironsource-mobile/react-native-SDK/tree/master/example)

[통합 테스트 제품군](/grow/levelplay/sdk/react/integration-test-suite.md)과의 통합 여부 확인

## 다음 단계##next-steps

Mediation 네트워크를 추가로 연동하거나 추가 광고 형식을 설정 Unity 통합 가이드를 따르십시오.

* [Mediation Networks 추가](/grow/levelplay/sdk/react/mediation-networks.md)
* [보상형 광고](/grow/levelplay/sdk/react/rewarded-ads-integration.md)
* [인터스티셜 광고](/grow/levelplay/sdk/react/interstitial-integration.md)
* [네이티브 광고](/grow/levelplay/sdk/react/native-ads-integration.md)