# React Native 전면 광고

## 전면 광고 노출하기 <a href="#live-interstitial" id="live-interstitial"></a>

{% hint style="info" %}
로컬 환경에서 배너 노출을 확인하고 싶다면, 아래의 TEST\_UNIT\_ID를 사용해주세요.

자세한 예시는 [Github](https://github.com/OpenRhapsody/adrop_ads_flutter/blob/master/example/lib/views/interstitial_example.dart)서 확인하실 수 있습니다.
{% endhint %}

| Ad type      | Ad unit ID                           |
| ------------ | ------------------------------------ |
| Interstitial | PUBLIC\_TEST\_UNIT\_ID\_INTERSTITIAL |

{% tabs %}
{% tab title="Class" %}

<pre class="language-typescript"><code class="lang-typescript"><strong>// (선택사항) 이벤트 리스너 선언하기
</strong>const listener = {
        onAdReceived: (ad: AdropInterstitialAd) =>
            console.log(`Adrop interstitial Ad load with unitId ${ad.unitId}!`),
        onAdFailedToReceive: (ad: AdropInterstitialAd, errorCode: string) =>
            console.log(`error in ${ad.unitId} while load: ${errorCode}`),
        onAdFailedToShowFullScreen: (ad: AdropInterstitialAd, errorCode: string) =>
            console.log(`error in ${ad.unitId} while showing: ${errorCode}`),
        ...
    }
    
const YourComponent: React.FC = () => {
    const [interstitialAd, setInterstitialAd] = useState&#x3C;AdropInterstitialAd>(null)

    useEffect(() => {
        let adropInterstitialAd = new AdropInterstitialAd('YOUR_UNIT_ID')
        adropInterstitialAd.listener = listener
        adropInterstitialAd.load()
        setInterstitialAd(adropInterstitialAd)
    }, []);

    const show = () => {
        if (interstitialAd?.isLoaded) {
            interstitialAd?.show()
        } else {
            console.log('interstitial ad is loading...')
        }
    }

    return (
        &#x3C;View>
            &#x3C;Button title="display ad" onPress={show}/>
        &#x3C;/View>
    )
}
</code></pre>

{% endtab %}

{% tab title="Hook" %}

```typescript
const YourComponent: React.FC = () => {
    const { load, show, isLoaded, reset } =
        useAdropInterstitialAd('YOUR_UNIT_ID')

    const handleShow = () => {
        if (isLoaded) show()
    }

    return (
        <View>
            <Button title="load ad" onPress={load}/>
            <Button title="display ad" onPress={handleShow}/>
        </View>
    )
}
```

{% endtab %}
{% endtabs %}

## 전면 광고 Destroy <a href="#destroy-interstitial" id="destroy-interstitial"></a>

{% tabs %}
{% tab title="Class" %}

```typescript
useEffect(() => {
    return () => {
        interstitialAd.destroy()
    }
}, [])
```

{% endtab %}

{% tab title="Hook" %}

```typescript
useEffect(() => {
    return () => {
        reset()
    }
}, [])
```

{% endtab %}
{% endtabs %}

## 적용 확인하기 <a href="#check-interstitial" id="check-interstitial"></a>

console에서 발급받은 unitId가 한 번이라도 광고요청을 할 경우 성공적으로 연결됩니다.

{% hint style="info" %}
광고 유닛에 연결된 광고가 없다면, 전면 광고가 랜더링 되지 않습니다.\
따라서 전면 광고가 정상적으로 랜더링 되는지 확인하고 싶으면, TEST\_UNIT\_ID 를 사용해 주세요.

TEST\_UNIT\_ID 를 사용하면 전면 광고 랜더링 확인은 할 수 있지만, console과 연결되지는 않습니다.\
따라서 **성공적인 연결을 확인하려면 콘솔에 등록한 광고 유닛의 아이디를 적용해 주시고, 하단 이미지 처럼 콘솔을 확인해 주세요.**
{% endhint %}

<figure><img src="https://114331753-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F80r9IosbRVD44m7nPdej%2Fuploads%2FsC5yCTttkmG4oj60sPXX%2Fimage%20(2).png?alt=media&#x26;token=b9ce7b40-1cdc-427f-9d2b-568aee287594" alt=""><figcaption></figcaption></figure>
