React 프로젝트를 진행 하다 보면 부딫히는 몇몇 문제들이 있는데 커뮤니티 형성이 잘 되어있고 자료가 방대하다 보니 99% 정도는 구글링을 통해 해결이 가능한 경우가 많다. 문제는 1%인데 Webworker를 연동 시키는 것도 그 중 하나였다. 웹워커를 리액트와 연동하기 위해선 다양한 방법이 있는데 여기서 그 중 한가지를 소개하도록 하겠다.
워커를 생성하기 위해서 `new Worker`를 호출해야 하는데 여기서 웹워커 파일을 전달해야한다. 웹워커 파일을 전달하기 위한 전달자 역활을 하는 것이 필요한데, Webworker.js를 생성하여 Webworker를 연동시켜 준다.
```javascript
// Webworker.js
export default class Webworker {
constructor(worker) {
const code = worker.toString();
const blob = new Blob(["(" + code + ")()"]);
return new Worker(URL.createObjectURL(blob));
}
}
```
worker를 받아오면 contructor에서 해당 코드를 blob으로 변환 후, Worker를 생성 하여 리턴해 준다. 실제 사용의 예는 아래와 같다.
``` jsx
import React, { useEffect, useState } from "react";
import Webworker from "worker/Webworker";
import myWorker from "worker/myWorker";
function MyHook () {
const [worker, setWorker] = useState();
const getMessage = msg => console.log(msg);
// Component Did Mount
useEffect(() => {
const _worker = new Webworker(myWorker);
_worker.onmessage = getMessage;
}, []);
return
}
```