웹 워커란 무엇이며 NextJS에서 사용하는 방법

전제 조건

• ReactJS/NextJS 기본 지식

---

웹 워커란?

JavaScript는 단일 스레드 언어이며, 여기서 사용하는 스레드를 메인 스레드라고 합니다
실제로 브라우저는 다른 스레드를 사용합니다
브라우저 API의 웹 작업자는 JavaScript로 추가 스레드를 생성하고 등록할 수 있는 방법입니다

---

메인 스레드에서만 작업할 수 있는데 왜 다른 스레드를 생성합니까?

차트를 그리려면 많은 양의 데이터를 계산해야 한다고 합시다.
이러한 계산은 페이지가 응답하지 않을 정도로 오래 걸릴 수 있습니다
이것이 웹 작업자가 필요한 곳입니다.
해당 데이터를 계산하기 위해 새 스레드를 생성할 수 있으며, 완료되면 웹 작업자가 결과를 메인 스레드로 다시 보낼 수 있습니다

---

NextJS에서 웹 워커를 사용하는 방법

이 샘플에서는 Web Worker를 사용하여 개 사진 API를 가져오고 결과를 기본 스레드로 다시 보내 해당 이미지를 표시하겠습니다

• 평소처럼 NextJS 프로젝트를 초기화하세요
• 이 샘플에서는 여기에서 반응 후크를 사용하려고 하므로 파일 위에 '클라이언트 사용'을 추가하여 page.tsx를 클라이언트 구성 요소로 만듭니다.
• 일반적인 값 상태와 onChange 핸들러를 사용하여 입력 생성
• onClick 이벤트가 포함된 버튼을 만듭니다. 이 버튼을 사용하여 웹 작업자에게 API를 가져오라고 지시합니다
• 웹 작업자 인스턴스를 보유할 Ref 생성
• 웹 작업자를 초기화하고 웹 작업자가 다시 보내는 데이터를 처리하는 이벤트를 첨부하는 효과를 생성하고 페이지가 마운트 해제된 후 스레드/웹 작업자를 종료합니다
• 웹 작업자로부터 받은 이미지 URL을 보관하는 상태를 만듭니다.
• page.tsx는 다음과 같습니다

"use client";

import { ChangeEvent, MouseEvent, useCallback, useEffect, useRef, useState } from "react";

export default function Home() {
    const [userInput, setUserInput] = useState<string>("");
    const workerRef = useRef<Worker>();
    const [dogPics, setDogPics] = useState<string[]>();

    useEffect(() => {
        workerRef.current = new Worker(new URL("./worker.ts", import.meta.url));
        workerRef.current.onmessage = (event: MessageEvent<string[]>) => setDogPics(event.data);
        return () => {
            workerRef.current?.terminate();
        };
    }, []);

    const handleUserInputChange = useCallback(
        (e: ChangeEvent<HTMLInputElement>) => {
            setUserInput(e.target.value);
        },
        [setUserInput]
    );

    const handleFetch = useCallback(
        (e: MouseEvent<HTMLButtonElement>) => {
            userInput && workerRef.current?.postMessage(userInput);
        },
        [userInput]
    );

    return (
        <div>
            <input
                placeholder="number of dogs"
                value={userInput}
                onChange={handleUserInputChange}
                className="mr-4 text-black"
            ></input>
            <button className="bg-green-500 text-black rounded" onClick={handleFetch}>
                fetch
            </button>
            {dogPics && dogPics.map((pic) => <img key={pic} src={pic} alt="dog pic"></img>)}
        </div>
    );
}

• page.tsx와 같은 폴더에 Worker.ts라는 파일을 만듭니다.

self.onmessage = async (e: MessageEvent<string>) => {
    const url = `https://dog.ceo/api/breeds/image/random/${e.data}`;
    const response = await fetch(url).then((res) => res.json());
    self.postMessage(response.message);
};

이제 앱을 실행하고 결과를 확인해보세요!

위 내용은 웹 워커란 무엇이며 NextJS에서 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!