React에서 WebWorker 사용

개시하다

비즈니스를 잘 개발하려는 게 아니라 기술을 시도하는 동안 워커-loader 등을 가져와 TypeScript로 대처하는 게 번거롭다.
그냥 쓰려고 했는데...이럴 때 쓰려고요.
※ 업무나 여러 사람의 개발, 게임 등 개인 개발이 아닌 경우에는 워커 로더나 컴링크의 도입, TypeScript를 잘 활용해 유형별 안전한 개발을 진행하세요.

이루어지다

WebWorker 준비

먼저 웹 워커 설치를 시작합니다.
적당히 받은 수치를 순환하다.
loop.worker.js

export default () => {
    self.onmessage = (event) => {
        const max = event.data;

        for (let i = 1; i <= max; i++) {
            console.log(`${i}回目`);
        }

        postMessage('finish');
    }
}

WebWorker 읽기

위에서 만든 Worker를 읽을 수 있는 레벨을 만듭니다.
worker-loader.js

export defautlt class WorkerLoader extends Worker {
    
    constructor(worker, onMessage) {
        const code = worker.toString();
        const blob = new Blob([`(${code})()`]);
        const workerUrl = URL.createObjectURL(blob);

        const instance = new Worker(workerUrl);
        
        if (instance) {
            URL.revokeObjectURL(workerUrl);
        }

        if (onMessage) {
            instance.onmessage = onMessage;
        }

        return instance;
    }
}

vanilla JS에서 사용

index.js

import WorkerLoader from './lib/worker-loader.js';
import LoopWorker from './workers/loop.worker.js';

(function () {
    const loopWorker = new WorkerLoader(LoopWorker, (message) => {
        console.log(`message from worker => ${message.data}`);
    });

    loopWorker.postMessage(100000);
})()

리액션으로.

App.jsx

import WorkerLoader from './lib/worker-loader';
import LoopWorker from './workers/loop.worker';


const App = () => {
    const worker = new WorkerLoader(LoopWorker);

    const handleClick = () => {
        worker.postMessage(100000);
    }

    useEffect(() => {
        worker.onmessage = (message) => {
            console.log(`message from worker => ${message.data}`);
        }

        return () => {
            worker.terminate();
        }
    }, []);


    return <button onClick={handleClick}>post message</button>;
}