멀티 스레딩

JavaScript의 스레드

자바스크립트는 싱글스레드 언어이다. 비동기 처리를 통해서 멀티스레드처럼 할 수 있지만 CPU 연산이 무거운 작업에서는 부적합하다. 이러한 부분을 보완하기 위해서 따로 객체를 만든 것이 Worker이다.

코드

react에서 webWorkers 사용

import { useState, useEffect } from "react";
import { createWorker } from "./workerSetup";

function App() {
  const [result, setResult] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);

  const startWorker = () => {
    const worker = createWorker();
    setLoading(true);

    // 워커에게 작업 요청 (예: 피보나치 40번째)
    worker.postMessage(40);

    // 워커로부터 결과 수신
    worker.onmessage = (e) => {
      setResult(e.data);
      setLoading(false);
      worker.terminate(); // 작업 끝나면 워커 종료
    };
  };

  return (
    <div>
      <h1>React + Web Worker 예제</h1>
      <button onClick={startWorker}>계산 시작 (피보나치 40)</button>
      {loading ? <p>계산 중...</p> : <p>결과: {result}</p>}
    </div>
  );
}

export default App;


// workerSetup.ts
export const createWorker = () => {
  return new Worker(new URL("./worker.ts", import.meta.url), {
    type: "module",
  });
};