> This is a page from the ElevenLabs documentation. For a complete page index, fetch https://elevenlabs.io/docs/llms.txt. For the full documentation in a single file, fetch https://elevenlabs.io/docs/llms-full.txt.
# React용 오디오 네이티브
> **Info**
>
> 이 가이드를 계속 진행하기 전에 [오디오 네이티브 개요](/docs/ko/eleven-creative/audio-tools/audio-native)의 단계에 따라 오디오 네이티브를 시작하세요.
이 가이드에서는 오디오 네이티브를 React 앱에 통합하는 방법을 소개합니다. Next.js 프로젝트를 중심으로 설명하지만, 기본 개념은 모든 React 기반 애플리케이션에 적용할 수 있습니다.
#### 오디오 네이티브 React 컴포넌트 만들기
[오디오 네이티브 개요](/docs/ko/eleven-creative/audio-tools/audio-native)의 단계를 완료하면 임베드 코드 스니펫이 생성됩니다. 다음은 예시 스니펫입니다.
**`임베드 코드 스니펫`**
```html title="임베드 코드 스니펫"
```
스니펫에서 데이터를 추출하여 맞춤 설정 가능한 React 컴포넌트를 만들 수 있습니다.
**`ElevenLabsAudioNative.tsx`**
```tsx title="ElevenLabsAudioNative.tsx" maxLines=0
// ElevenLabsAudioNative.tsx
'use client';
import { useEffect } from 'react';
export type ElevenLabsProps = {
publicUserId: string;
textColorRgba?: string;
backgroundColorRgba?: string;
size?: 'small' | 'large';
children?: React.ReactNode;
};
export const ElevenLabsAudioNative = ({
publicUserId,
size,
textColorRgba,
backgroundColorRgba,
children,
}: ElevenLabsProps) => {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://elevenlabs.io/player/audioNativeHelper.js';
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return (
{children ? children : 'Elevenlabs AudioNative Player'}
);
};
export default ElevenLabsAudioNative;
```
위 컴포넌트는 [GitHub](https://github.com/elevenlabs/examples/blob/main/examples/audio-native/react/ElevenLabsAudioNative.tsx)에서 확인할 수 있습니다.
#### 오디오 네이티브 컴포넌트 사용
페이지에서 컴포넌트를 사용하기 전에 원본 코드 스니펫에서 공개 사용자 ID를 가져와야 합니다. 임베드 코드 스니펫의 `data-publicuserid` 내용을 복사하여 컴포넌트의 `publicUserId` prop에 삽입합니다.
**`page.tsx`**
```tsx title="page.tsx" maxLines=0
import { ElevenLabsAudioNative } from './path/to/ElevenLabsAudioNative';
export default function Page() {
return (
Your Page Title
// Insert the public user ID from the embed code snippet
Your page content...
);
}
```
#### 컴포넌트 prop으로 플레이어 맞춤 설정
컴포넌트 prop을 사용해 플레이어를 맞춤 설정할 수 있습니다. 예를 들어 크기, 텍스트 색상, 배경색을 변경할 수 있습니다.
**`page.tsx`**
```tsx title="page.tsx" maxLines=0
import { ElevenLabsAudioNative } from './path/to/ElevenLabsAudioNative';
export default function Page() {
return (
Your Page Title
Your page content...
);
}
```