Using web workers in CRA
이제 더이상 Create-react-app 에서 웹워커 지원 안해요 라는 말은 없는 것으로.
1. Install CRA
$ npx create-react-app hello-worker-with-cra
...
$ cd hello-worker-with-cra
2. Install webpack worker plugin with react-app-rewired
$ yarn add --dev react-app-rewired worker-plugin
...
{
...
"scripts": {
...
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
...
},
...
}
const WorkerPlugin = require("worker-plugin");
module.exports = function override(config, env) {
//do stuff with the webpack config...
config.plugins.push(new WorkerPlugin());
return config;
};
3. Install worker and test
(example 1)
import { exposeWorker } from "react-hooks-worker";
const fib = (i) => (i <= 1 ? i : fib(i - 1) + fib(i - 2));
exposeWorker(fib);
import { useWorker } from "react-hooks-worker";
...
const createWorker = () =>
new Worker("./workers/slow_fib.worker", { type: "module" });
function App() {
const { result, error } = useWorker(createWorker, 3);
if (error) return <div>Error: {error}</div>;
return (<div>Result: {result}</div>);
}
export default App;
(example 2)
const fib = (i) => (i <= 1 ? i : fib(i - 1) + fib(i - 2));
onmessage = (evt) => {
postMessage(fib(evt.data));
};
const createWorker = () =>
new Worker("./workers/slow_fib.worker", { type: "module" });
function App() {
const worker = useRef(createWorker());
const [result, setResult] = useState();
useEffect(() => {
worker.current.postMessage(7);
worker.current.addEventListener("message", (evt) => {
setResult(evt.data);
});
}, []);
return (<div>Result: {result}</div>);
}
export default App;