[React] 자바스크립트 <script> 태그를 동적으로 불러오기

public폴더 의 index.html 파일의 바디태그 안의 하단에 <script>를 추가해주면 해당 라이브러리를 적용할 수 있다.

하지만 이 방법을 사용할 경우, 자바스크립트를 항상 불러오기 때문에 필요한 컴포넌트에서만 선택적으로 불러올 수 없어 비효율이 발생한다.

따라서 React에서는 useEffect를 사용하여 동적으로 불러오는 방법을 사용할 수 있다.

 

아래 블로그 내용 중 전체코드

import { useEffect, useState } from "react";

function useScript(src) {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

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

	//script가 없을시 실행하여 중복돼서 생기지 않도록 함
    if (!script) {
      script = document.createElement("script"); //script태그를 추가해준다.
      script.src = src; //script의 실행 src
      script.async = true; //다운로드 완료 즉시 실행
    }

    const handleLoad = () => setLoading(false);
    const handleError = (error) => setError(error);

    script.addEventListener("load", handleLoad);
    script.addEventListener("error", handleError);

    document.body.appendChild(script);

    return () => {
      script.removeEventListener("load", handleLoad);
      script.removeEventListener("error", handleError);
    };
  }, [src]);

  return [loading, error];
}

export default useScript;

 

 

React에서 <script> 태그로 자바스크립트 불러오기

 

<script>로 HTML 문서에 자바스크립트 넣기 (feat. defer & async)