[React] React에서 외부 스크립트 연결하기, 전역변수

리액트 프로젝트를 진행하던 중 외부 라이브러리 스크립트를 가져와 사용해야 하는 일이 생겼다.

여기저기 구글링 하며 알아본 정보를 정리하고자 한다.

 

1. effect - hook 이용하기

https://usehooks.com/useScript/

useScript

직접 설명하는 것보다 훨씬 잘 정리된 글이다. 원래는 이 방법으로 구현하고자 했고, 코드도 작성해 두었지만 다른 라이브러리도 있지 않을까 싶어 더 찾아보었다.

 

2. Hemlet 사용하기

https://www.npmjs.com/package/helmet

helmet

왜 이름이 헬멧인가 했더니 이 라이브러리로 쉽게 헤더 설정을 해줄 수 있었다. 그러나 라이브러리를 가져오기만 하고 라이브러리를 이용해 변수를 가져온다거나는 하지 못한다.

  helmet({
    referrerPolicy: { policy: "no-referrer" },
  })

 이런식으로 헤더로 설정할 내용을 helmet으로 감싸 return 안에 작성해주면 된다.

 

3. jsScript 사용하기

https://www.npmjs.com/package/scriptjs

scriptjs

jquery처럼 스크립트를 불러올 수 있는 방법이다. 

$script('jquery.js', function () {
  $script('my-jquery-plugin.js', function () {
    $script('my-app-that-uses-plugin.js')
  })
})

이런식으로 종속성 있는 구조도 가능하며 

$script(['dom', 'event'], function () {
  // use dom & event
})

한꺼번에 불러와 함수를 다루는 방법도 가능하다. 나는 이 방법으로 구현해 두었다.

 

 

+ 이런 방식으로 스크립트를 불러와 외부 스크립트 내 변수를 다루다 보면 분명  Uncaught TypeError: Cannot read properties of undefined 같은 에러가 나올 텐데.. 이는 전역변수로 해결해주면 된다.

/*global 변수 이름들 */
/*eslint no-undef: "error"*/