> ## 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.

# 시작하기

> Daro React Native SDK를 앱에 통합하는 방법에 대해 안내합니다.

<Note>
  애드유닛은 앱에서 광고를 표시할 지면과 광고 포맷을 설정한 단위입니다. DARO 2.0 SDK에는 업데이트된 대시보드의 **Ad Unit Key**를 복사해 입력하세요. 앱 설정에 쓰는 Integration Key와는 다른 값입니다. API 인자 `adUnitId`, `unitId`, `key`와 예제의 `YOUR_AD_UNIT_ID`는 이름을 그대로 사용하지만, 입력할 값은 해당 애드유닛의 Ad Unit Key입니다. 기존 애드유닛 ID를 사용한 연동도 계속 지원합니다. 리포트·콜백의 식별자를 새 연동용 키와 혼동하지 마세요.
</Note>

## 시작하기 전에

<Warning>
  **중요: SDK 초기화 필수**

  배너 광고와 네이티브 광고는 반드시 SDK 초기화가 완료된 후에 렌더링되어야 합니다. 초기화 전에 광고 컴포넌트를 렌더링하면 초기화 오류가 발생할 수 있습니다.

  인터스티셜 광고, 리워드 비디오 광고 등 다른 광고 형식도 SDK 초기화 이후에 로드해야 합니다.
</Warning>

### 요구사항

* 안드로이드 minSdkVersion : 23
* iOS 15.1 이상

<Warning>
  Android 앱의 `minSdkVersion`이 26 미만이면 앱 모듈(`android/app/build.gradle` 또는 `build.gradle.kts`)에 core library desugaring을 설정하세요. 설정 방법은 [Android 시작하기](/ko/sdk-integration-v2/android/get-started)를 참고하세요.

  설정하지 않으면 API 26 미만 기기에서 광고 ID 조회 중 클래스 로딩 오류가 발생할 수 있습니다.

  Expo config plugin은 이 설정을 적용하지 않으므로 Expo 프로젝트도 직접 적용해야 합니다.
</Warning>

<Info>
  `react-native-daro@2.0.0`은 Android `so.daro:daro-sdk` 2.0.0, iOS `DaroAds` 2.0.0를 사용합니다.

  래퍼와 네이티브 SDK 버전은 독립적으로 관리됩니다.
</Info>

<Check>
  [app-ads.txt 파일 설정(링크)](https://guide.daro.so/ko/app-ads-txt-settings)이 잘 되었는지 다시 한 번 확인해주세요.
</Check>

### 지원 광고 포맷

* 배너/MREC
* 네이티브
* 인터스티셜
* 리워드
* 라이트 팝업

## 패키지 설치하기

```bash theme={null}
npm i react-native-daro@2.0.0
```

## Expo 프로젝트 설정하기

통합 SDK는 **Expo config plugin**을 제공합니다. 앱 설정에 INTEGRATION KEY만 넣으면 prebuild 시 Android·iOS 프로젝트 설정을 자동으로 적용합니다.

<Warning>
  Expo Go에서는 DARO 네이티브 모듈을 사용할 수 없습니다. development build 또는 prebuild된 앱에서 사용해야 합니다.
</Warning>

<Steps>
  <Step title="Expo config에 plugin 추가">
    기존 Expo config는 유지하고 `expo.plugins`에 DARO 설정을 추가합니다. 플랫폼마다 발급받은 **Integration Key 하나**만 넣으면 됩니다.

    ```json app.json theme={null}
    {
      "expo": {
        "plugins": [
          [
            "react-native-daro",
            {
              "ios": {
                "daroIntegrationKey": "발급받은 iOS INTEGRATION KEY"
              },
              "android": {
                "daroIntegrationKey": "발급받은 Android INTEGRATION KEY"
              }
            }
          ]
        ]
      }
    }
    ```

    <Note>
      iOS는 `attUsageDescription`으로 App Tracking Transparency 안내 문구를 바꿀 수 있습니다. 넣지 않으면 기본 문구가 들어갑니다.
    </Note>
  </Step>

  <Step title="prebuild 또는 EAS Build 실행">
    ```bash theme={null}
    npx expo prebuild
    ```

    <Note>
      동적 Expo config를 사용하는 프로젝트에서는 앱 식별자 설정을 기존 Expo/EAS 설정 방식에 맞게 관리하세요.
    </Note>
  </Step>
</Steps>

<Warning>
  1.x의 키 파일과 이전 Expo 키 설정을 제거하고 플랫폼별 `daroIntegrationKey`를 사용하세요. 기존 앱은 [마이그레이션 가이드](/ko/sdk-integration-v2/react-native/migration-guide)의 순서대로 전환하세요.
</Warning>

Expo config plugin 설정을 마쳤다면 [SDK 초기화하기](#sdk-초기화하기)로 이동하세요.

## React Native CLI 프로젝트 설정하기

Expo config plugin을 사용하지 않는 프로젝트는 [Android 시작하기](/ko/sdk-integration-v2/android/get-started)와 [iOS 시작하기](/ko/sdk-integration-v2/ios_new/get-started)의 빌드 도구 및 Integration Key 설정을 적용하세요.

Android에서는 앱 모듈에 `so.daro` 플러그인과 `so.daro:daro-sdk` 의존성을 추가해야 합니다. 이 페이지에서 안내하는 React Native 패키지의 Android SDK 버전과 맞춰주세요. `android/gradle.properties`에 다음 React Native 설정도 추가합니다. 기존 제외 목록이 있다면 항목을 합칩니다.

```properties theme={null}
android.useAndroidX=true
android.enableJetifier=true
android.jetifier.ignorelist=react-android,hermes-android
```

Kotlin Gradle plugin은 2.2.20 이상을 사용하세요.

iOS에서는 패키지의 CocoaPods 의존성을 사용합니다. [iOS 시작하기](/ko/sdk-integration-v2/ios_new/get-started)에 따라 `DaroIntegrationKey`, `SKAdNetworkItems`, 추적 권한 안내 문구와 `post_install` 훅을 설정한 뒤 `ios/` 디렉토리에서 `pod install`을 실행하세요. 기존 React Native `post_install` 설정은 유지하고 훅을 같은 블록에 추가합니다.

## SDK 초기화하기

초기화 전에 앱의 동의 수집 흐름을 완료하고 사용자 선택과 앱의 적용 대상 판단을 전달하세요. 아래 `privacy`는 앱이 제공하는 값이며, 예제에서 옵트인을 기본값으로 정하지 않습니다. GDPR은 `optIn` · `optOut` · `notApplicable` · `unknown`, CCPA는 `optIn` · `optOut` · `notApplicable`, COPPA는 `child` · `notChild`를 사용합니다. COPPA 상태는 반드시 초기화 전에 설정하세요. 이미 전달한 동의 문자열이 있다면 상태를 갱신할 때도 함께 전달합니다.

아래 코드를 참고하여 SDK를 초기화합니다. `privacy`는 동의 수집이 끝난 뒤 한 번 전달하는 안정된 객체로 유지하세요. 매 렌더링마다 새 객체를 만들면 초기화 흐름을 반복 실행하게 됩니다.

```tsx theme={null}
import { useEffect, useState } from "react";
import { View } from "react-native";
import { AdBannerView, AdFormat, initialize, setGdpr, setCcpa, setCoppa } from "react-native-daro";
import type { DaroGdprStatus, DaroCcpaStatus, DaroCoppaStatus } from "react-native-daro";

type Privacy = {
  gdpr: DaroGdprStatus;
  ccpa: DaroCcpaStatus;
  coppa: DaroCoppaStatus;
  gdprConsentString?: string;
  ccpaConsentString?: string;
};

const BANNER_AD_UNIT_ID = "YOUR_BANNER_AD_UNIT_ID";

function App({ privacy }: { privacy: Privacy }) {
  const [isInitialized, setIsInitialized] = useState(false);

  useEffect(() => {
    async function startAds() {
      await setGdpr(privacy.gdpr, privacy.gdprConsentString);
      await setCcpa(privacy.ccpa, privacy.ccpaConsentString);
      await setCoppa(privacy.coppa);
      await initialize();
    }
    startAds()
      .then(() => setIsInitialized(true))
      .catch(console.error);
  }, [privacy]);

  // 초기화 완료 후 광고 컴포넌트 렌더링
  return (
    <View>
      {isInitialized && (
        <AdBannerView
          adFormat={AdFormat.BANNER}
          adUnitId={BANNER_AD_UNIT_ID}
        />
      )}
    </View>
  );
}
```

## 베스트 프랙티스

### SDK 초기화 관리

SDK를 효율적으로 관리하고 에러를 방지하기 위한 권장 사항입니다.

1. **`앱 시작 시 initialize() 호출`**
   * 앱의 진입점(App.js 또는 index.js)에서 SDK를 초기화하세요
2. **초기화 상태를 state로 관리**
   * 초기화 완료 여부를 추적하여 광고 렌더링 시점을 제어하세요
3. **모든 배너 및 네이티브 광고 컴포넌트를 조건부 렌더링으로 보호**
   * 초기화가 완료되지 않은 상태에서 광고 컴포넌트가 렌더링되지 않도록 하세요

## 다음 단계

연동과 초기화를 완료했다면 사용할 광고 포맷의 구현 문서로 이동하세요.

* [배너/MREC 광고](/ko/sdk-integration-v2/react-native/ad-formats/banner)
* [네이티브 광고](/ko/sdk-integration-v2/react-native/ad-formats/native)
* [인터스티셜 광고](/ko/sdk-integration-v2/react-native/ad-formats/interstitial)
* [리워드 비디오 광고](/ko/sdk-integration-v2/react-native/ad-formats/rewarded)
* [라이트 팝업 광고](/ko/sdk-integration-v2/react-native/ad-formats/lightpopup)