react로 개발을 하던 중, HTML 파일에서 곧바로 <script src=""> 방식으로 로드하여 사용하는 라이브러리를 적용하는 경우가 생겨 난감한 상황에 빠졌습니다. 일반적인 리액트 프로젝트의 구조에서는 index.html에 이런식으로 <script> 를 적용하게 되면 정상적으로 동작하지 않는 경우가 생기게 됩니다.
<body>
// ...
<script src="./js/jquery.js"></script>
<script src="./js/plugin.js"></script>
</body>
제가 맞닥뜨린 상황의 경우 외부 라이브러리 파일이 본문의 특정 dom 요소를 찾아 액션을 부여하는 식으로 작동하는 구조였는데, 리액트 프로젝트의 경우 html은 먼저 로드되고, dom 요소들이 나중에 생성되기 때문에 먼저 실행된 외부 라이브러리들이 dom 요소를 찾지 못하는 결과로 이어지게 되었습니다.
그렇다면 컴포넌트들이 모두 로드 된 다음에 외부 파일을 불러오면 되지 않을까? 하는 생각이 들었고 <script> 요소를 동적으로 생성해서 붙여주면 되겠다는 그럴듯한 추측을 해보았습니다.
제가 시도한 방법은 아래와 같습니다.
util/loadExternalJS.js
function loadExternalJS() {
// 필요한 파일들을 동적으로 생성해줍니다.
const scriptJquery = document.createElement("script");
scriptJquery.src = "./js/jquery.js";
scriptJquery.async = true;
const scriptJquery = document.createElement("script");
scriptJquery.src = "./js/plugin.js";
scriptJquery.async = true;
// 생성된 script 요소들을 body에 붙여주세요
document.body.appendChild(scriptJquery);
document.body.appendChild(scriptPlugin);
}
export default loadExternalJS;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import loadExternalJS from './util/loadExternalJS';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>
document.getElementById('root')
);
loadExternalJS(); // 새로 만든 함수 추가
reportWebVitals();
약간의 꼼수이긴 했지만, 이제서야 라이브러리가 정상적으로 동작하였습니다. 이 방법을 사용하면 리액트에서도 이전 버젼의 라이브러리들을 사용할 수 있을 것 같네요. 저처럼 특수한 경우일때 한 번쯤 고려해보면 괜찮을 것 같습니다.
* 이런식으로 직접 DOM을 조작하는건 리액트에서 추천하는 방식이 절대 아닙니다. 사이드 이펙트가 없다는 확신이 있을때에만 제한적으로 사용하시고, 대부분의 경우에서는 사용하지 않으시길 바랍니다.
반응형
'이론 > Frontend' 카테고리의 다른 글
| 함수와 바인딩, this (0) | 2022.03.03 |
|---|---|
| node.js에서 명령어로 브라우저 실행하기 (1) | 2022.01.30 |
| react-canvas-draw 사용법 (4) | 2021.12.26 |
| JavaScript의 위임 (Delegation of JavaScript) (0) | 2021.11.19 |
| JavaScript의 프로토타입 (Prototype of JavaScript) (0) | 2021.09.27 |
댓글