전제 조건

• ReactJS/NextJS에 대한 기본 지식

웹 워커란?

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

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

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

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

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

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

"use client";

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

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

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

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

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

    return (
        

            
            
                fetch
            
            {dogPics && dogPics.map((pic) => )}
        
    );
}

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

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

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