React에서 외부 스크립트 동적 로드 및 관리하기

React 애플리케이션에서 외부 스크립트를 동적으로 로드하고 관리하는 방법은 여러 상황에서 꼭 필요합니다. 예를 들어, 광고 스크립트, 서드파티 라이브러리, 또는 특정 위젯을 삽입할 때 간편하면서도 효율적인 관리가 가능해야 합니다.

1. React에서 외부 스크립트를 동적으로 로드하는 이유

초기 로드 시간을 줄이고, 필요할 때만 스크립트를 로드하여 리소스를 절약할 수 있습니다. 불필요한 코드가 미리 로드되지 않도록 관리하여 사용자 경험을 개선할 수 있습니다.

2. useEffect를 활용한 스크립트 동적 로드

React의 useEffect 훅을 사용하면 컴포넌트가 마운트 될 때 외부 스크립트를 삽입하고 언마운트 시 정리할 수 있습니다.

import React, { useEffect } from 'react';

function ExternalScriptLoader({ src, onLoad }) {
  useEffect(() => {
    if (!src) return;

    const script = document.createElement('script');
    script.src = src;
    script.async = true;

    if (onLoad) {
      script.onload = onLoad;
    }

    document.body.appendChild(script);

    // 컴포넌트 언마운트 시 스크립트 제거
    return () => {
      document.body.removeChild(script);
    };
  }, [src, onLoad]);

  return null;
}

export default ExternalScriptLoader;

3. 스크립트 중복 삽입 방지 팁

동일한 스크립트가 여러 번 삽입되는 것을 방지하려면 DOM에서 먼저 존재 여부를 확인하는 것이 좋습니다.

useEffect(() => {
  if (!src) return;

  const existingScript = document.querySelector(`script[src=\"${src}\"]`);

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }
}, [src]);

4. 마무리

React에서 외부 스크립트를 동적으로 로딩하고 관리하는 방법을 익히면 애플리케이션의 성능과 유지보수성이 향상됩니다. useEffect 훅과 DOM 조작을 적절하게 활용하여 원하는 시점에 스크립트를 안전하게 삽입 및 제거하세요.