React에서 WebWorker사용하기

Web Worker 를 사용할 때 webworker 파일을 불러오면 된다.
하지만, react가 빌드되면서 webworker의 파일을 불러올 수 없게 된다.
여러가지 방법 중 하나인 방법을 사용해보자.

code to blob

webworker의 코드를 blob으로 변환하여 worker를 생성하여 반환해주는 방법을 사용한다.

export default class WebWorker {
  constructor(worker) {
    const code = worker.toString();
    const blob = new Blob(["(" + code + ")()"]);
    return new Worker(URL.createObjectURL(blob));
  }
}

사용의 편의성을 위해 WebWorker 를 클래스로 만들어 주고 이를 import해서 사용했다.

export default () => {
  onmessage = function (e) {
    this.setInterval(() => {
      getSeatList(e.data).then((res) => {
        res.json().then((data) => {
          this.postMessage(data.data.list);
        });
      });
    }, 1000);
  };
}

import WebWorker from "./WebWorker";
import worker from "./worker";

w = new WebWorker(worker);
w.postMessage(token.current);

w.onmessage = async (e) => {
  console.log(e.data);
}

위와 같이 webworker로 동작하고 싶은 코드를 따로 파일로 만들어 준 뒤 이를 WebWorker 클래스에서 가져와 blob으로 변환해줘서 사용한다.

web-worker

https://www.npmjs.com/package/web-worker
다른 방법으로는 npm 모듈 중 web-worker을 사용할 수 있을 것 같다.
사용해보지는 않았지만, 좋은 대안인 것 같다

code to blob

web-worker

references