[URH-39] useWorker 신규

[jeongbaebang]

👾 Pull Request

• 티켓: useWorker 신규

• 상태: 신규

1️⃣ Spec

• 메인 스레드(주 스레드)와는 별도의 스레드에서 자바스크립트 코드를 실행하여 작업을 수행하고,
  메인 스레드가 UI 렌더링과 같은 다른 작업을 차질 없이 진행할 수 있도록 도와줍니다.
• 기본적인 작업 외에 네트워크 요청도 워커 스레드 내부에서 동작이 가능하도록 구현하였습니다.

2️⃣ 변경 사항

• 유틸 함수가 분리되었습니다.

3️⃣ 예시 코드

import { useEffect, useState } from 'react';
import useWorker from './hooks/useWorker';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>O(n^2) 100억 연산 블로킹 테스트</h1>
      <h1>메인 스레드 비블로킹 작업 (Web Worker 사용)</h1>
      <WorkerComponent />
      <h1>메인 스레드 블로킹 작업 (Web Worker 미사용)</h1>
      <SynchronousComponent />
      <button
        onClick={() =>
          setCount((prev) => prev + 1)
        }>{`나를 클릭해주세요!: ${count}`}</button>
    </div>
  );
};

const size = 100_000;
// 테스트용 O(n^2) 작업
const workerScript = (num: number): number => {
  console.log('처리시작');
  let sum = 0;

  for (let i = 1; i <= num; i++) {
    for (let j = 1; j <= num; j++) {
      sum += i * j;
    }
  }

  console.log('처리다됨');
  return sum;
};

const WorkerComponent = () => {
  const [input, setInput] = useState(size);
  const { result, start, cancel } = useWorker(workerScript);

  const handleStart = () => {
    start(input);
  };

  useEffect(() => {
    console.log(result);
  }, [result]);

  return (
    <div>
      <input
        type="number"
        value={input}
        disabled
        onChange={(e) => setInput(parseInt(e.target.value, 10))}
      />
      <button onClick={handleStart}>Start Worker</button>
      <button onClick={cancel}>Cancel Worker</button>
      <pre>{result ? JSON.stringify(result, null, 2) : 'No result'}</pre>
    </div>
  );
};

const SynchronousComponent = () => {
  const [input, setInput] = useState(size);
  const [result, setResult] = useState(0);

  const handleStart = () => {
    setResult(workerScript(input));
  };

  return (
    <div>
      <input
        type="number"
        value={input}
        disabled
        onChange={(e) => setInput(parseInt(e.target.value, 10))}
      />
      <button onClick={handleStart}>Start Synchronous</button>
      <div>Result: {result}</div>
    </div>
  );
};

export default App;

4️⃣ 관련 문서 (선택 사항)

• https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

[bicochan]

멋져요 정배 님!👏🏻🔥

그런데 혹시 두 개 이상의 스레드를 사용할 수도 있을까요?
사용할 수 있다면 예시를 추가하거나 테스트 코드를 작성해봐도 좋을 것 같습니다!

[jeongbaebang]

멋져요 정배 님!👏🏻🔥

그런데 혹시 두 개 이상의 스레드를 사용할 수도 있을까요? 사용할 수 있다면 예시를 추가하거나 테스트 코드를 작성해봐도 좋을 것 같습니다!

현재 구현은 전용 워커(DedicatedWorker)를 사용하여 메인 스레드와 별도로 동작하도록 되어 있어, 워커 간의 직접적인 통신은 어려울 것 같습니다. 같은 작업을 수행하는 여러 개의 동일한 워커(전용 워커(DedicatedWorker))를 생성하는 것은 가능하지만, useWorker 내부에서는 1개의 워커만 생성되도록 했습니다. 혹시 여러 개의 워커를 사용해야 하는 특정 상황이 있다면, 알려주시면 감사하겠습니다. 워커를 통한 작업 경험이 많지 않아 어떤 상황에서 여러 스레드가 필요한지 잘 알지 못해, 피드백을 주시면 도움이 될 것 같습니다!

[Choozii]

🤩