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

이 질문의 목표는 React 구성 요소에 인라인 스크립트를 추가하는 방법을 탐색하는 것입니다. 사용자가 인라인 스크립트 태그와 위험하게SetInnerHTML 속성을 모두 사용하여 외부 스크립트를 로드하려고 시도했지만 어느 접근 방식도 원하는 스크립트를 실행하지 못하는 것 같습니다.

제안되는 한 가지 해결 방법은 React 구성 요소에 componentDidMount 메서드를 생성하고 동적으로 DOM에 스크립트 요소를 생성하고 추가합니다. 이 접근 방식을 사용하면 구성 요소가 마운트될 때 스크립트가 한 번만 실행됩니다.

그러나 React에서 보다 현대적이고 권장되는 접근 방식은 useEffect 후크를 사용하는 것입니다. 이 후크를 사용하면 구성 요소가 렌더링된 후 API 호출 또는 DOM 조작과 같은 부작용을 수행할 수 있습니다.

다음 코드 조각은 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);
  }
}, []);

로그인 후 복사

이 코드를 사용자 정의 후크로 래핑하면 여러 구성 요소에서 재사용이 가능해집니다.

const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;
    document.body.appendChild(script);

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

로그인 후 복사

다음과 같이 사용할 수 있습니다:

import useScript from 'hooks/useScript';

const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.js');

  // Rest of the component
}

로그인 후 복사

사용자 정의 스크립트 후크와 함께 useEffect 후크를 활용하면 React 구성 요소에서 스크립트를 로드하고 실행하는 깔끔하고 효율적인 방법을 제공합니다.

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