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을 통해 모듈이나 패키지로 사용 가능한지 먼저 확인하는 것이 좋습니다. 이 접근 방식은 여러 가지 이점을 제공합니다.

• 코드를 깔끔하게 가져올 수 있음
• 패키지 업데이트를 쉽게 관리할 수 있음
• 내장된 오류 처리 메커니즘을 활용할 가능성

위 내용은 React에서 스크립트 태그를 동적으로 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!