리액트/JSX에 스크립트 태그 추가하기

저는 React 컴포넌트에 인라인 스크립팅을 추가하려는 비교적 간단한 문제를 가지고 있습니다. 지금까지 제가 가지고 있는 것은:

'use strict';
import '../../styles/pages/people.scss';
import React, { Component } from 'react';
import DocumentTitle from 'react-document-title';
import { prefix } from '../../core/util';
export default class extends Component {
    render() {
        return (
            <DocumentTitle title=People>
                <article className={[prefix('people'), prefix('people', 'index')].join(' ')}>
                    <h1 className=tk-brandon-grotesque>People</h1>
                    
                    <script src=https://use.typekit.net/foobar.js></script>
                    <script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script>
                </article>
            </DocumentTitle>
        );
    }
};

저는 다음과 같이 시도해 보았습니다:

<script src=https://use.typekit.net/foobar.js></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

어떤 방법도 원하는 스크립트를 실행하지 못하는 것 같습니다. 빠뜨린 간단한 것이 있는 것 같습니다. 도움을 줄 수 있는 사람이 있을까요?

참고: foobar를 무시하십시오. 실제로 사용 중인 실제 ID가 있지만 공유하고 싶지 않습니다.

답변 1

이것은 아마도 예제에서 패키지 react와 react-document-title을 설치하는 방법입니다. 그리고 npm에서 사용 가능한 Typekit 패키지가 있습니다.

업데이트:

지금은 훅이 있으므로 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);
  }
}, []);

이것은 사용자 정의 훅에 대한 훌륭한 후보입니다 (예: hooks/useScript.js):

import { useEffect } from 'react';
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]);
};
export default useScript;

이렇게 사용할 수 있습니다:

import useScript from 'hooks/useScript';
const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.js');
  // 컴포넌트의 나머지 부분
}

답변 2

React/JSX에서 스크립트 태그 추가하는 방법
React와 JSX는 현대적인 웹 개발에 필수적인 프레임워크와 언어입니다. React는 사용자 인터페이스를 구성하고 관리하는 데 사용되며, JSX는 JavaScript 확장 문법으로 React 구성 요소를 작성하는 데 사용됩니다. 이러한 도구를 사용하여 웹 사이트를 개발할 때, 스크립트 태그 추가는 SEO에 영향을 미칠 수 있는 중요한 과정입니다.
스크립트 태그를 사용하여 외부 스크립트 파일 또는 인라인 스크립트를 React/JSX 애플리케이션에 추가할 수 있습니다. 그러나 이 작업을 수행할 때 일부 SEO 규칙을 염두에 두어야 합니다.
첫째, 검색 엔진은 React/JSX 코드를 이해하지 못합니다. React 애플리케이션은 자바스크립트를 사용하여 클라이언트 측에서 렌더링되기 때문에 검색 엔진은 초기 로드 시 완전한 HTML 구조를 보지 못합니다. 따라서, 검색 엔진이 이해할 수 있는 렌더링된 HTML 버전도 제공해야 합니다. 이를 위해 서버 측 렌더링을 구현하고, 검색 엔진에게 즉각적인 정적 HTML을 제공하는 방법을 고려해야 합니다. 이렇게 하면 React/JSX 애플리케이션의 컨텐츠가 검색 엔진에 잘 색인될 수 있습니다.
둘째, 외부 스크립트 파일을 로드할 때 주의해야 합니다. 일반적으로, 검색 엔진은 JavaScript 파일을 따라가지 못하므로 스크립트 내에서 생성된 컨텐츠는 검색 엔진에 의해 무시될 수 있습니다. 이러한 이유로 외부 스크립트 로드 시점과 관련된 컨텐츠를 스크립트 외부에 노출시켜 검색 엔진이 수집할 수 있도록 해야 합니다. 이를 위해서는 스크립트를 비동기적으로 로드하거나, React/JSX 애플리케이션의 초기 로드를 지연시키는 방법을 사용할 수 있습니다. 이로써 컨텐츠를 검색 엔진이 수집할 수 있게 됩니다.
셋째, 스크립트 내용을 최적화하는 것이 중요합니다. 검색 엔진은 페이지의 성능을 고려하므로, 스크립트 파일에 포함된 코드가 페이지 로딩 속도를 느리게 할 수 있습니다. 따라서, 최소한의 코드만 사용하고, 코드를 압축하고, 효율적으로 실행되도록 최적화해야 합니다. 또한, 필요한 데이터를 동적으로 로드하는 데 너무 많은 시간이 걸리면 검색 엔진이 이를 인식할 수 없으므로 주의해야 합니다.
React/JSX에서 스크립트 태그를 추가하는 것은 SEO에 큰 영향을 미칠 수 있습니다. 서버 측 렌더링과 스크립트 파일 로드 시점의 조정, 최적화된 코드 작성 등을 통해 검색 엔진이 애플리케이션의 컨텐츠를 적절하게 인식할 수 있도록 해야 합니다. 이러한 SEO-friendly한 접근 방식으로 React/JSX 애플리케이션을 구축하면, 검색 엔진에서 더욱 잘 색인되고, 사용자에게 더 좋은 웹 사이트 경험을 제공할 수 있습니다.