-
React 프로젝트에서 필요한 외부 라이브러리들을 npm 패키지로 설치해서 불러올 수 있지만 간혹 npm 패키지가 제공되지 않는 경우도 있다.
이럴 경우엔 웹에서 외부 스크립트를 불러오는 방법인 HTML 문서의
script태그를 사용할 수 밖에 없는데,script태그를 어디서 어떻게 불러와야 할까?📌 index.html에 script 태그 삽입하기
일반적으로 React 프로젝트에는 public 폴더에
index.html파일이 있다.그리고 그 파일 안에 root라는 id를 가진 div가 하나 존재하는 형태이다.
React에서는 이 root라는 id가 설정된 div에 동적으로 내용을 채워주는 방식으로 동작하므로 index.html 파일에 script 태그를 넣어주면 된다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>React App</title> <script src="https://unpkg.com/라이브러리"></script> </head> <body> <div id="root"></div> </body> </html>근데, 이 방식에는 한가지 큰 단점이 있다!
해당 라이브러리가 필요하지 않은 컴포넌트에서도 이 라이브러리를 계속 불러오므로 비효율적이다.
📌 React 컴포넌트에서 script 태그를 동적으로 삽입하기
외부 라이브러리를 불러오고자 하는 컴포넌트에서 script를 동적으로 생성해보자.
컴포넌트 생성 직후 한번 실행할 것이므로
useEffect훅을 사용하여 해당 훅 안에서 동적으로 script를 생성해주면 된다.useEffect(() => { const script = document.createElement("script"); script.src = "https://unpkg.com/라이브러리"; document.head.appendChild(script); script.onload = () => { console.log('script 동적 생성!') }; return () => script.remove(); }, []);이렇게 하면 컴포넌트가 렌더링된 직후 script 요소가 동적 생성되고, script가 다 로드된 후 콘솔창에 콘솔이 찍히는 것을 확인할 수 있다.
[참고 사이트]
https://www.daleseo.com/react-hooks-use-script/
React에서 <script> 태그로 자바스크립트 불러오기
Engineering Blog by Dale Seo
www.daleseo.com
728x90'React' 카테고리의 다른 글
useEffect 와 useLayoutEffect 의 차이 (0) 2023.11.15 CLSX 플러그인 사용법 (0) 2023.09.24 모달창 외부 클릭 시 모달 닫기 (1) 2023.07.30 리액트에서 애니메이션 효과 구현하기 (0) 2023.07.26 useReducer, Context, Redux 차이 (0) 2022.11.16 댓글
