[React] index.html에 추가한 SDK 스크립트를 다른 파일 또는 다른 컴포넌트에서 사용하는 방법

문제 발생

필자는 카카오 로그인 API 기능을 사용하기 위해 위 사진처럼 index.html에 javascript SDK 를 추가하였다.

https://developers.kakao.com/docs/latest/ko/javascript/getting-started

공식 API 문서를 살펴보니 카카오 로그인 API는 Kakao 객체로 접근하는 것을 알게되었다.

하지만 필자는 SDK 스크립트를 불러온 index.html 파일이 아닌 Main.jsx에서 API 기능을 사용하고 싶었다.

이에 Main.jsx에서 Kakao.init()으로 접근하니 오류가 발생했다.

 

해결 방법

 

index.html에 있는 SDK 스크립트를 Main.jsx에서  접근하려면 어떻게 해야할까?

 

위 궁금증을 해소하기 위해서는 window 객체에 대해서 이해해야 한다.

1. window 객체란 웹 브라우저 안의 모든 요소들이 소속된 객체이다.

2. window 객체는 최상위에 있기 때문에 어디서든 접근이 가능하다.

 

윈도우 객체에 대해 이해했다면 다시 본론으로 돌아와 SDK에 대해 살펴보자.

일반적으로 index.html에 직접 스크립트를 추가하면 해당 스크립트는 window 객체에 종속된다.

따라서 다른 파일 또는 컴포넌트에서 해당 스크립트를 사용할 때 window 객체를 통해 해당 스크립트에 접근할 수 있다.

 

순서도와 예시는 아래와 같다.

1. index.html에서 SDK 스크립트를 추가하여 window 객체에 해당 스크립트가 종속된다. 

2. index.html는 SDK 스크립트를 추가한 파일이기 때문에 Kakao로 직접 접근할 수 있다.

3. 다른 파일에서는 1번 과정에서 window객체에 종속된 스크립트를 불러와야 하므로 window.Kakao로 접근한다.

4. 일반적으로 window.Kakao를 계속 사용하면 코드가 길어지기 때문에 아래와 같이 const 변수에 담아 접근한다.

const Kakao = window.Kakao;
//이제 Kakao로 접근 가능
Kakao.init();