리액트에 멀티스레드(Multi-Thread) 도입하기(feat. worker-plugin)
webpack5에서부터는 worker-plugin을 설치하지 않아도 worker-plugin을 이용할 수 있습니다.(자동으로 컴파일)
따라서 직접 worker-plugin을 설치해서 webpack에 적용하면 다음과 같은 에러를 만납니다
Module parse failed: ParserHelpers.addParsedVariableToModule is not a function
따라서 다음과 같이 해줍니다.
// 이 라이브러리는 원하는 RPC와 같은 경험을 제공한다.
// worker-plugin에 wrap해서 사용
yarn add comlink
// App.css
body {
margin: 0;
overflow: hidden;
font-size: 3rem;
}
button {
font-size: 1.2rem;
display: block;
margin: 1em 0;
}
div {
background-color: thistle;
height: 100vh;
margin: 0;
padding: 1em;
}
수많은 연산을 하도록 하는 함수를 작성한다
// utils.js
const bigTask = (int) => {
console.log(int);
const sum = new Array(int)
.fill(0)
.map((el, idx) => el + idx)
.reduce((sum, el) => sum + el, 0);
console.log(sum);
};
export const runBigTask = (int) => {
bigTask(int);
return "done";
};
export const runBigTaskAsync = async (int) => {
bigTask(int);
return "done";
};
멀티쓰레드 사용을 위한 워커를 구성한다
// worker.js
import { expose } from "comlink";
import { runBigTask } from "./utils";
const worker = {
runBigTask,
};
expose(worker);
비교하기 위한 앱을 만든다
// App.js
import React, { useState } from "react";
import { wrap } from "comlink";
import "../styles/App.css";
import { runBigTask, runBigTaskAsync } from "../utils";
const SECOND = 100000000;
function App() {
const [data, setData] = useState();
return (
<div
style={{
backgroundColor: `${data === "loading" ? "orange" : "transparent"}`,
}}
>
<button
onClick={() => {
console.log("boop");
}}
>
Boop
</button>
<button
onClick={async () => {
setData("loading");
const worker = new Worker(new URL("../worker", import.meta.url), {
name: "runBigTaskWorker",
type: "module",
});
const { runBigTask } = wrap(worker);
setData(await runBigTask(SECOND));
}}
>
Web Worker
</button>
<button
onClick={() => {
setData("loading");
setData(runBigTask(SECOND));
}}
>
Sync on Main thread
</button>
<button
onClick={async () => {
setData("loading");
setData(await runBigTaskAsync(SECOND));
}}
>
Async on Main thread
</button>
</div>
);
}
export default App;
결과는 다음과 같다
- Sync, Async on Main Thread 버튼을 눌렀을 때, 연산이 다 끝나고 나서야 Boop을 누를 수 있거나 console이 Boop이라고 반응했다.
- 반면에 Web Worker 버튼을 눌렀을 때, 연산은 다른 쓰레드에서하므로 메인쓰레드에서는 Boop을 바로 눌러서 console을 바로 확인할 수 있었다.
