---
title: "React.js용 플레이어 적용"
slug: "vpe-example-react"
updated: 2026-08-20T09:03:39Z
published: 2026-08-20T09:03:39Z
canonical: "guide-gov.ncloud-docs.com/vpe-example-react"
---

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

# React.js용 플레이어 적용

Classic/VPC 환경에서 이용 가능합니다.

React.js용 플레이어 적용에서는 Video Player Enhancement Web SDK JS를 활용하여 플레이어를 적용하고 설정하는 예제를 설명합니다.

          참고

          

React.js 예제를 실행하려면, 다음과 같은 환경이 요구됩니다.

- React 버전: 18.2.0 (`react-dom` 버전: 18.2.0)

## script 태그 동적 삽입

React.js에서는 script 태그를 동적으로 삽입하는 방법을 사용하여 플레이어를 적용할 수 있습니다. script 태그를 동적으로 삽입하는 방법은 다음과 같습니다.

1. 해당 .js, .jsx 컴포넌트 파일에 다음의 코드를 작성하여 script 태그를 추가해 주십시오.

```
const script = document.createElement("script");
const access_key = "VPE SDK Access Key"; // VPE SDK 발급 키

script.async = true;
script.src = "https://player.vpe.naverncp.com/ncplayer.js?access_key="+access_key;
document.body.appendChild(script);
```
2. React 컴포넌트에서 외부 자바스크립트 불러오기와 같은 작업을 사이드 이펙트(side effect)로 처리해 주십시오.
  - `useEffect()` 훅(hook)을 활용하여 컴포넌트 진입 시 스크립트를 사용하도록 설정해 주십시오.([useScrpit](https://usehooks.com/useScript/) 참고)
3. `src/hooks` 디렉터리에서 `useScript.jsx` 파일을 생성하고 다음 코드와 같이 작성해 주십시오.

```
import {useEffect, useState} from "react";
export default function useScript(url) {
     const [status, setStatus] = useState(url ? "loading" : "error");
      useEffect(() => {
          if (!url) {
           setStatus("error");
           return;
          }

          let script = document.querySelector(`script[src="${url}"]`);

          if (!script) {
           console.log("script not found, creating new one...")
           script = document.createElement(("script"));
           script.src = url;
           script.async = true;
           script.setAttribute("data-status", "loading");
           document.body.appendChild(script);

           const setAttributeFromEvent = (event) => {
            script.setAttribute(
                "data-status",
                event.type === "load" ? "ready" : "error"
            );
            setStateFromEvent(event.type);
           }

           script.addEventListener("load", setAttributeFromEvent);
           script.addEventListener("error", setAttributeFromEvent);
          } else {
           setStatus(script.getAttribute("data-status"));
          }
          const setStateFromEvent = (event) => {
           setStatus(event.type === "load" ? "ready" : "error");
          }

          script.addEventListener("load", setStateFromEvent);
          script.addEventListener("error", setStateFromEvent);

          return () => {

           if (script) {
            script.removeEventListener("load", setStateFromEvent);
            script.removeEventListener("error", setStateFromEvent);
           }
          };
      }, [url]);

      return status;
     }
```
  - 스크립트가 로드되었을 때와 에러가 발생했을 때의 상태값을 변경하여 관리할 수 있습니다.
4. 페이지 및 컴포넌트에서 `useScript`를 사용하여 스크립트를 정상적으로 불러왔을 때 플레이어를 로드해 주십시오.
  - DemoPlayer.jsx

```
import useScript from "./hooks/useScript";
import {useEffect} from "react";

const access_key = "VPE SDK Access Key"; // 발급 받은 VPE 라이선스 키
const url = "https://player.vpe.naverncp.com/ncplayer.js?access_key=" + access_key;

function createPlayer(id) {
    
    let player = new ncplayer(id, {

        "playlist": [
            {
                file: "https://rhhwgjjetcsm16398693.cdn.ntruss.com/live/video/ls-20230309164515-SCFQE/playlist.m3u8",
                poster: "https://wnfosehmzhuc12665447.cdn.ntruss.com/thumb/sample_thumb.pngtype=m&w=1024&h=760&ttype=jpg",
                description: {
                    "title": "LIVE ERROR 테스트 영상",
                    "created_at": "2022.07.13",
                    "profile_name": "네이버클라우드",
                    "profile_image":"https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202208/d127c8db642716d84b3201f1d152e52a.png"
                },
            }
        ],
        // options...
    });
}

function DemoPlayer() {
    let status = useScript(url);
        useEffect(() => {
            if (status === "ready") { 
                // 스크립트가 준비된 상태에서 플레이어 생성
                createPlayer('video');
            }
            else {
                console.log("not ready", url)
            }
        }, [status]);

    return (
      <>
         <div>
           <div id="video"></div>
         </div>
      </>
    )
}
export default DemoPlayer
```