React에서 스크립트 태그를 동적으로 추가하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

React에서 스크립트 태그를 동적으로 추가하는 방법은 무엇입니까?

Mary-Kate Olsen

풀어 주다： 2024-12-14 07:55:10

원래의

236명이 탐색했습니다.

How to Dynamically Add Script Tags in React?

React/JSX에 스크립트 태그 추가

동적 스크립트 로딩의 경우 고려해야 할 몇 가지 접근 방식이 있습니다.

옵션 1: componentDidMount 수명 주기 방법 사용

다음이 필요한 스크립트의 경우 컴포넌트가 마운트될 때 한 번만 실행되면, componentDidMount 메소드를 활용할 수 있습니다:

componentDidMount() {
    const script = document.createElement("script");

    script.src = "https://use.typekit.net/foobar.js";
    script.async = true;

    document.body.appendChild(script);
}

로그인 후 복사

옵션 2: useEffect Hook 사용

React에 후크가 등장하면서 , useEffect는 더 간결하고 재사용 가능함을 제공합니다. 해결 방법:

useEffect(() => {
  const script = document.createElement('script');

  script.src = "https://use.typekit.net/foobar.js";
  script.async = true;

  document.body.appendChild(script);

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

로그인 후 복사

옵션 3: 동적으로 스크립트 가져오기 및 실행

스크립트를 여러 번 가져와 실행해야 하는 경우 보다 동적인 접근 방식이 필요합니다.

fetch('https://use.typekit.net/foobar.js')
  .then(res => res.text())
  .then(scriptText => {
    const script = document.createElement('script');

    script.text = scriptText;

    document.body.appendChild(script);
  });

로그인 후 복사

모듈/패키지 고려 접근 방식

그러나 동적 스크립트 로딩에 의지하기 전에 항상 필요한 스크립트가 npm을 통해 모듈이나 패키지로 사용 가능한지 먼저 확인하는 것이 좋습니다. 이 접근 방식은 여러 가지 이점을 제공합니다.