React에서 마법을 위한 생성기 사용-JS 튜토리얼-php.cn

Use generators for magic in React

직설적으로 말하자면, 당신은 갈고리를 너무 많이 사용하고 있습니다. ID와 키도 React 앱의 상태로 존재합니다. useState 후크는 상태가 변경될 때마다 가상 DOM을 업데이트하는 부작용을 유발합니다. 관련 없는 데이터를 상태로 저장하는 것은 성능에 좋지 않습니다.

제너레이터로 모든 경우를 해결할 수 있는 것은 아닙니다. 그러나 복잡한 후크 패턴을 생성기로 대체하여 로직을 단순화하고 관리 및 확장성을 높일 수 있습니다.

TL;DR

React 구성 요소에서 데이터를 동적으로 생성하려면 생성기를 사용하세요. 생성기는 논리를 단순화하고 후크에 대한 의존도를 줄일 수 있습니다.

제너레이터를 언제 어디서 사용해야 하는지 이해를 돕기 위해 간단한 예를 들어보겠습니다.

발전기란 무엇입니까?

생성기는 일시 중지하고 다시 시작할 수 있는 기능입니다. function* 선언과 항복 표현식을 사용하여 생성됩니다.

function* generator() {
    yield 1;
    yield 2;
    yield 3;
}

const gen = generator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

로그인 후 복사

이를 사용하여 데이터 컬렉션을 반복하거나 데이터 시퀀스를 생성할 수 있으며, 이는 구성 요소 내부의 콘텐츠를 렌더링하는 데 사용될 수 있습니다.

아직도 헷갈리시나요? 제너레이터의 사용법을 이해하기 위해 간단한 예제를 만들어 보겠습니다.

헤드라인 예

구성 요소에 렌더링하려는 헤드라인 목록이 있다고 가정해 보겠습니다.

const headlines = [
    "Local Shops Thrive",
    "Team Wins Finals",
    "Stay Flu-Free",
    "New Phone Launch",
    "Sunny Week Ahead",
];

로그인 후 복사

헤드라인 배열을 반복하고 인덱스를 상태 변수로 저장하여 구성 요소 내부에 각 헤드라인을 렌더링하면 됩니다.

import { useState } from "react";

const Headlines = () => {
    const [index, setIndex] = useState(0);

    return (
        <div>
            <h1>{headlines[index]}</h1>
            <button onClick={() => setIndex((index + 1) % headlines.length)}>
                Next
            </button>
        </div>
    );
};

로그인 후 복사

이는 반복하고 반복적으로 표시하려는 헤드라인의 선형 배열이 있을 때까지 잘 작동합니다. 이제 헤드라인으로 패턴을 만들고 싶다면 어떻게 해야 할까요? 예를 들어, 먼저 시간을 기준으로 인사말 메시지를 표시한 다음 요일을 표시하고 마지막으로 무작위로 동기 부여가 되는 생각을 표시합니다.

const headlines = [
    "Good Morning", // Greeting message
    "Today is Monday", // Day of the week
    "Stay positive", // Motivational thought
];

로그인 후 복사

이제 정적 데이터 세트를 단순히 반복할 수는 없습니다. 대신 각 헤드라인을 동적으로 계산해야 합니다.

하지만 당신은 메가마인드입니다. 아이디어가 떠오릅니다. 패턴의 각 부분을 계산하고 그 출력을 렌더링 텍스트로 사용하는 세 가지 함수를 만드는 것이 어떨까요?

function getGreetingMessage() {
    const hours = new Date().getHours();
    if (hours < 12) {
        return "Good Morning";
    } else if (hours < 18) {
        return "Good Afternoon";
    } else {
        return "Good Evening";
    }
}

function getDayOfTheWeek() {
    const days = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
    ];
    return `Today is ${days[new Date().getDay()]}`;
}

function getMotivationalThought() {
    const thoughts = ["Stay positive", "Keep going", "You're awesome"];
    return thoughts[Math.floor(Math.random() * thoughts.length)];
}

로그인 후 복사

이제 이러한 기능을 사용하여 구성 요소 내부의 헤드라인을 렌더링할 수 있습니다.

import { useState } from "react";

const Headlines = () => {
    const pattern = [
        getGreetingMessage,
        getDayOfTheWeek,
        getMotivationalThought,
    ];
    const [index, setIndex] = useState(0);

    return (
        <div>
            <h1>{pattern[index]()}</h1>
            <button onClick={() => setIndex((index + 1) % pattern.length)}>
                Next
            </button>
        </div>
    );
};

로그인 후 복사

뭔가 눈치채셨나요? 구성 요소의 전체 논리를 변경했습니다. 로직을 단순화하고 구성요소를 깔끔하게 유지하기 위해 생성기를 사용할 수 있습니다.

function* patternGenerator() {
    yield getGreetingMessage();
    yield getDayOfTheWeek();
    yield getMotivationalThought();
}

const pattern = patternGenerator();

로그인 후 복사

이제 이 생성기를 사용하여 구성 요소 내부의 헤드라인을 렌더링할 수 있습니다.

import { useState } from "react";

const Headlines = () => {
const [index, setIndex] = useState(0);

    return (
        <div>
            <h1>{pattern.next().value}</h1>
            <button onClick={() => setIndex((index + 1) % 3}>Next</button>
        </div>
    );

};

로그인 후 복사

이렇게 하면 구성 요소를 깔끔하게 유지하고 논리를 단순하게 유지할 수 있습니다. 생성기를 사용하면 논리를 단순화하고 후크에 휴식을 줄 수 있습니다.

생성기는 데이터가 생성되는 방식 뒤에 있는 논리도 추상화합니다. 또한 구성 요소 내부의 논리를 변경하지 않고도 생성기에 더 많은 기능을 추가하거나 기능 순서를 변경하여 패턴을 쉽게 확장할 수 있습니다.

한 단계 더 발전하기 위해 생성기 로직을 처리하는 사용자 정의 후크를 생성할 수도 있습니다.

function* generator() {
    yield 1;
    yield 2;
    yield 3;
}

const gen = generator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

로그인 후 복사

또한 생성기 내부에서 논리가 어떻게 이동하더라도 생성기용 API가 구성요소 전체에서 일관되게 유지됩니다.

따라서 데이터 생성 프로세스에 대한 더 많은 유연성과 제어 기능을 제공합니다.