> ## Documentation Index
> Fetch the complete documentation index at: https://guide.daro.so/llms.txt
> Use this file to discover all available pages before exploring further.

# 배너 & MREC 광고

> DARO를 통해 배너와 MREC 광고를 구현하는 방법을 알아봅니다.

## 배너 & MREC 형태 소개

### 배너 광고

* 앱 레이아웃의 일부를 차지하는 직사각형 광고 형태로 보편적으로 사용됩니다.
* 대부분의 광고 디맨드들이 지원하는 형태인 320x50 사이즈를 사용합니다.

<img src="https://mintcdn.com/delightroom-5a71a6a8/j3-znW7LKrbpP3mb/sdk-integration/common-img/ad-formats/banner-example.png?fit=max&auto=format&n=j3-znW7LKrbpP3mb&q=85&s=d00b59bcc639852f56ead46315f574a5" alt="Banner Example Pn" title="Banner Example Pn" style={{ width:"40%" }} width="998" height="2160" data-path="sdk-integration/common-img/ad-formats/banner-example.png" />

### MREC 광고

* 300x250 의 사이즈를 MREC으로 구분하여 부릅니다.
* 전반적으로 배너와 동일한 특성을 가집니다.

<img src="https://mintcdn.com/delightroom-5a71a6a8/dxU0bpsPoPvkYh_g/sdk-integration/common-img/ad-formats/mrec-example.png?fit=max&auto=format&n=dxU0bpsPoPvkYh_g&q=85&s=6e43a92f3517134aba67f81f874cd36e" alt="Mrec Example Pn" title="Mrec Example Pn" style={{ width:"41%" }} width="998" height="2160" data-path="sdk-integration/common-img/ad-formats/mrec-example.png" />

***

## 배너/MREC 컴포넌트 생성하기

<Tabs>
  <Tab title="Non-Reward">
    ```javascript theme={null}
    import { AdFormat, AdBannerView } from "react-native-daro";
    import { Platform } from "react-native";
    ```
  </Tab>

  <Tab title="Reward">
    ```javascript theme={null}
    import { AdFormat, AdBannerView } from "react-native-daro-m";
    import { Platform } from "react-native";
    ```
  </Tab>
</Tabs>

<CodeGroup>
  ```javascript 배너 theme={null}

  const BANNER_AD_UNIT_ID = Platform.select({
      ios: ${iOS unit Id},
      android: ${Android unit id},
      default: '',
  });

  <AdBannerView
    style={styles.bannerView} //컴포넌트 생성 시 광고 단위 ID 를 전달해야합니다. style 사이즈는 320x50 으로 설정해 주세요.
    adFormat={AdFormat.BANNER}
    adUnitId={BANNER_AD_UNIT_ID}
  />
  ```

  ```javascript MREC theme={null}

  const BANNER_AD_UNIT_ID = Platform.select({
      ios: ${iOS unit Id},
      android: ${Android unit id},
      default: '',
  });

  <AdBannerView
    style={styles.bannerView} //컴포넌트 생성 시 광고 단위 ID 를 전달해야합니다. style 사이즈는 300x250 으로 설정해 주세요.
    adFormat={AdFormat.MREC}
    adUnitId={BANNER_AD_UNIT_ID}
  />
  ```
</CodeGroup>

<Warning>
  * 동일 AdUnitId를 여러 지면에서 사용하는 경우 각 지면을 구분할 수 있도록 `placement`를 반드시 입력해주세요
</Warning>