Javascript를 사용하여 처음부터 반응형 저장소 구축

리액티브 프로그래밍은 데이터 변경 사항을 동적으로 반영하는 애플리케이션을 만들 수 있는 깔끔한 접근 방식입니다. 이는 React 및 Vue와 같은 많은 최신 JavaScript 프레임워크의 핵심 기술입니다. 이는 사용자 작업이나 기타 상태 변경에 응답하여 업데이트됩니다. 반응성의 내부가 무엇인지 이해하는 것은 너무 많은 작업처럼 느껴질 수 있으며 프레임워크의 목적인 '마법의' 추상화 중 하나처럼 느껴질 수 있습니다. 하지만 작은 반응형 시스템을 직접 구축하여 실제로 어떻게 작동하는지 확인할 수 있다면 어떨까요?

이 기사에서는 JavaScript로 처음부터 간단한 반응형 저장소를 구축하여 반응형 프로그래밍의 기본 사항을 살펴보겠습니다. 최소한의 구현으로 종속성 추적 및 자동 업데이트를 포함한 주요 개념을 살펴보겠습니다. 결국에는 종속성을 자동으로 추적하고 상태가 변경될 때마다 업데이트를 트리거하는 반응형 데이터 구조를 만드는 방법을 이해할 수 있어야 합니다. 이 접근 방식은 반응성을 이해하는 데 도움이 되며 직접 실험하고 프로젝트에 적용할 수 있는 도구를 제공합니다.

우리가 사용할 반응형 시스템의 핵심 구성 요소를 살펴보는 것부터 시작하겠습니다.

• 효과: 반응형 데이터의 변경에 따라 자동으로 실행되는 기능입니다. 이는 액세스된 모든 신호에 대한 종속성을 추적하는 효과 기능을 사용하여 등록됩니다.
• 신호: 값이 변경될 때마다 종속 효과를 알리는 반응형 데이터 속성입니다.
• 종속성: 신호와 신호에 의존하는 효과 간의 관계입니다. 신호의 변화가 관련 효과에 대한 업데이트를 트리거하도록 종속성을 추적합니다.

이제 반응형 프로그래밍 정의는 끝났으므로 사용할 Javascript API에 대해서도 언급하겠습니다.

프록시: 프록시 개체를 사용하면 다른 개체에 대한 프록시를 생성하여 기본 작업(예: 속성 액세스 및 할당)에 대한 사용자 지정 동작을 정의할 수 있습니다. 이 코드에서는 반응형 저장소(상태 개체)가 변경 사항에 반응하도록 만드는 데 사용됩니다.

Reflect: Reflect API는 가로챌 수 있는 JavaScript 작업을 위한 메서드를 제공합니다. 이는 반응 함수에서 Reflect.get 및 Reflect.set와 같은 작업을 수행하는 데 사용되며, 이를 통해 프록시는 객체의 원래 동작을 유지하면서 속성 액세스 및 할당을 처리할 수 있습니다.

Map: Map 객체는 키-값 쌍을 포함하는 컬렉션입니다. 여기서 키는 모든 데이터 유형이 될 수 있습니다. 이 구현에서는 각 신호와 관련된 종속성을 추적하는 dependencyMap을 생성하는 데 사용됩니다.

이제 초기 상태가 어떻게 생겼는지 정의해 보겠습니다.

// Let's define a Map object to track our dependencies
const dependencyTrackerMap = new Map();
// The activeEffect variable will hold the currently executing 
// effect function. 
// It will be set when an effect is run and will be used
// to track which effects depend on specific reactive properties. 
let activeEffect = null

// This function will make an object reactive
function reactive(target) {
    return new Proxy(target, {
        get(obj, prop) {
            trackDependency(prop); // Track dependency
            return Reflect.get(obj, prop);
        },
        set(obj, prop, value) {
            const result = Reflect.set(obj, prop, value);
            triggerDependency(prop); // Trigger reactions
            return result;
        }
    });
}

// the effect function will register reactive functions
function effect(fn) {
    activeEffect = fn;
    fn(); // Run the function once to register dependencies
    activeEffect = null;
}

// this function will track dependencies
function trackDependency(key) {
    if (activeEffect) {
        if (!dependencyTrackerMap.has(key)) {
            dependencyTrackerMap.set(key, new Set());
        }
        dependencyTrackerMap.get(key).add(activeEffect);
    }
}

// this function will trigger dependencies
function triggerDependency(key) {
    const deps = dependencyTrackerMap.get(key);
    if (deps) {
        deps.forEach(effect => effect());
    }
}

// This will create a reactive object with an initial state
// count and message here are signals
const state = reactive({ count: 0, message: "Hello" });

그래서 우리가 한 일은 다음과 같습니다.

1. 객체를 가져와서 향후 객체에 어떤 변경 사항이 적용되는지 추적하는 프록시를 반환하는 반응 함수를 만들었습니다.
2. 상태에 의존하는 반응형 함수를 등록하는 효과 함수를 만들었습니다. 효과가 정의되면 즉시 실행되어 종속성을 등록하고 그에 따라 activeEffect를 설정합니다.
3. 우리는 세 부분으로 구성된 종속성 추적기를 만들었습니다. trackDependency 함수는 반응 속성에 액세스할 때 활성 효과가 있는지 확인합니다. 그렇다면 dependencyTrackerMap의 해당 속성에 대한 종속성 집합에 해당 효과를 추가합니다. 그러면 TriggerDependency 함수는 dependencyTrackerMap에서 속성과 연결된 종속 효과 세트를 검색하고 속성 값이 변경될 때 각 효과를 실행합니다.

이제 콜백으로 효과를 생성하고 트리거해 보겠습니다.

// Let's define a Map object to track our dependencies
const dependencyTrackerMap = new Map();
// The activeEffect variable will hold the currently executing 
// effect function. 
// It will be set when an effect is run and will be used
// to track which effects depend on specific reactive properties. 
let activeEffect = null

// This function will make an object reactive
function reactive(target) {
    return new Proxy(target, {
        get(obj, prop) {
            trackDependency(prop); // Track dependency
            return Reflect.get(obj, prop);
        },
        set(obj, prop, value) {
            const result = Reflect.set(obj, prop, value);
            triggerDependency(prop); // Trigger reactions
            return result;
        }
    });
}

// the effect function will register reactive functions
function effect(fn) {
    activeEffect = fn;
    fn(); // Run the function once to register dependencies
    activeEffect = null;
}

// this function will track dependencies
function trackDependency(key) {
    if (activeEffect) {
        if (!dependencyTrackerMap.has(key)) {
            dependencyTrackerMap.set(key, new Set());
        }
        dependencyTrackerMap.get(key).add(activeEffect);
    }
}

// this function will trigger dependencies
function triggerDependency(key) {
    const deps = dependencyTrackerMap.get(key);
    if (deps) {
        deps.forEach(effect => effect());
    }
}

// This will create a reactive object with an initial state
// count and message here are signals
const state = reactive({ count: 0, message: "Hello" });

우리가 생성한 상태를 업데이트하려고 하면 콘솔 로그가 트리거됩니다.

//We are using state from the previous snippet:
effect(() => {
    console.log(Count has changed: ${state.count});
});

effect(() => {
    console.log("Message has changed");
    console.log(The new message is: ${state.message});
});

다음은 종속성이 트리거될 때 어떤 일이 발생하는지 시각화한 것입니다.

---

이 기사에서는 JavaScript로 기본 반응 시스템을 생성하여 데이터 변경에 따라 자동 업데이트(또는 부작용)를 활성화하는 방법을 살펴보았습니다. 이 구현은 프레임워크 '마법'의 일부인 반응형 프로그래밍 개념에 대한 소개 역할을 합니다. 게다가, 우리는 Proxy와 Reflect API의 기능을 배웠고 이를 Map 객체와 함께 사용했습니다.

요약하자면 이 반응형 시스템은 종속성을 관리하고 상태가 변경되면 자동으로 효과를 업데이트합니다. 특정 반응 속성에 의존하는 기능을 등록함으로써 시스템은 어떤 기능이 어떤 속성에 의존하는지 추적하고 필요할 때 다시 실행합니다. 이 접근 방식을 사용하면 추가 코드 없이 상태 변경 사항이 UI에 자동으로 반영되는 반응형 애플리케이션을 생성할 수 있으므로 개발자 경험이 향상되고 데이터 처리가 더 쉽고 효율적이 됩니다.

위 내용은 Javascript를 사용하여 처음부터 반응형 저장소 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!