Rhapsodist

react

React에 plane javascript code 삽입하기

2020.03.05

Created By Rhapsodist

Rhapsodist

All
(36)
DEVELOPMENT
(34)
OS
(1)
TOOLS
(1)

React에 plane javascript code 삽입하기

1.개요

React를 코드를 작성하다 보면 어쩔 수 없이 Plane Javascript( 노멀 자바스크립트 코드 )를 삽입해야하는 경우가 있다. 예를 들어 Google Analytics 를 삽입 한다고 생각했을때, React의 GA Module 를 사용해도 괜찮겠지만, 그저 몇줄의 코드만 삽입하면 끝나는 작업을 module까지 써서 작업하기 싫을 수도 있다. 그럴때 간단히 GA Script 만 삽입해 주고 싶을 때 사용이 가능하다.

  • dangerouslySetInnerHTML

2.Code

const GA_TRACKING_ID = '...';

<Head>
  <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`} />
  <script
    dangerouslySetInnerHTML={{
      __html: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments)};
        gtag('js', new Date());
        gtag('config', '${GA_TRACKING_ID}');
      `,
    }}
  />
</Head>

위의 코드와 같이 Script 태그 에 dangerouslySetInnerHTML 를 사용하여 __html object에 넘겨 주면 적용 된다.

Share to ...

#react
#plane
#text
#string

© 2020, made by Rhapsodist