복잡한 WordPress 블록 편집기(Gutenberg) 애플리케이션을 구축할 때 상태를 효율적으로 관리하는 것이 중요합니다. @wordpress/data가 중요한 역할을 하는 곳이 바로 여기입니다. WordPress 애플리케이션의 다양한 블록과 구성 요소에서 전역 상태를 관리하고 공유할 수 있습니다.

글로벌 상태를 처음 관리하거나 @wordpress/data를 사용하는 경우에도 걱정하지 마세요! 이 블로그 게시물에서는 리듀서, 액션, 선택기의 기본 사항을 안내하고 이를 사용하여 WordPress에서 상태를 관리하는 방법을 설명합니다.

@wordpress/data는 전 세계적으로 데이터를 저장, 업데이트 및 액세스하는 방법을 제공하여 다양한 구성 요소나 블록이 동일한 데이터를 공유하고 상호 작용할 수 있도록 합니다.

@wordpress/data의 주요 개념

@wordpress/data 사용 방법을 이해하려면 리듀서, 액션, 선택기라는 세 가지 주요 개념을 이해해야 합니다. 이는 상태를 관리하고 업데이트하는 방법의 핵심을 형성합니다.

행위:

액션은 리듀서에게 무엇을 해야 하는지 알려주는 지시나 명령과 같습니다. 이는 단순히 두 부분으로 구성된 객체입니다:

1. 어떤 종류의 변경이 일어나고 있는지 나타내는 유형입니다(예: 추가, 제거, 업데이트).
2. 해당 변경에 필요한 데이터(예: 추가할 항목)가 포함된 페이로드입니다.

다음은 장바구니 예시에서 작업이 어떻게 표시되는지 보여주는 예입니다.

const actions = {
    addToCart(item) {
        return {
            type: 'ADD_TO_CART', // Action type
            item // Payload: the item to add to the cart
        };
    },
    removeFromCart(itemId) {
        return {
            type: 'REMOVE_FROM_CART', // Action type
            itemId // Payload: the ID of the item to remove
        };
    }
};

간단히 말하면: 액션은 리듀서에게 상태에서 무엇을 변경해야 하는지 알려줍니다.

감속기:

리듀서는 국가의 관리자와 같습니다. 애플리케이션에서 무언가 변경될 때마다(예: 사용자가 블록을 추가하거나 기능을 비활성화하는 경우) 리듀서는 해당 변경 사항을 수신하고 그에 따라 상태를 업데이트합니다.

리듀서의 역할은 무엇인가요? 현재 상태와 작업을 가져온 다음 작업을 기반으로 새 상태를 반환합니다.
다음은 장바구니를 관리하는 간단한 리듀서의 예입니다:

const reducer = (state = { cart: [] }, action) => {
    switch (action.type) {
        case 'ADD_TO_CART':
            return {
                ...state, // Keep the existing state
                cart: [...state.cart, action.item] // Add the new item to the cart
            };
        case 'REMOVE_FROM_CART':
            return {
                ...state,
                cart: state.cart.filter((item) => item.id !== action.itemId) // Remove the item from the cart
            };
        default:
            return state; // Return the unchanged state for unknown actions
    }
};

간단히 말하면: 리듀서는 특정 작업이 전달될 때 상태가 어떻게 변경되는지 정의합니다.

선택기:

선택자는 상태에서 특정 데이터를 검색하거나 선택하는 기능입니다. 구성 요소가 데이터에 액세스해야 하는 경우(예: 장바구니에 있는 항목 표시) 선택기를 사용하여 매장에서 해당 데이터를 가져옵니다.

예를 들어 모든 장바구니 항목을 가져오는 선택기는 다음과 같습니다.

const selectors = {
    getCartItems(state) {
        return state.cart; // Return the cart items from the state
    }
};

구성요소에서 이 선택기를 사용하여 다음과 같이 장바구니 데이터에 액세스합니다.

const cartItems = useSelect((select) => select('my-store').getCartItems());

간단히 말하면: 선택기는 상태의 특정 데이터에 액세스할 수 있게 해주는 도우미 함수입니다.

@wordpress/data를 사용하여 구텐베르크에서 전역 상태를 구현하는 단계별 가이드

이제 기본 사항을 다루었으므로 Gutenberg 블록 또는 구성 요소에서 이러한 개념을 구현하는 방법을 살펴보겠습니다. @wordpress/data를 사용하여 간단한 저장소를 설정하고 일부 상태를 관리하며 작업 및 선택기를 사용하여 해당 상태와 상호 작용합니다.

1단계: 초기 상태 정의
먼저, 매장의 초기 상태를 정의해야 합니다. 이것은 우리 애플리케이션이 시작하는 기본 데이터입니다:

const DEFAULT_STATE = {
    cart: []
};

2단계: 작업 만들기
다음으로 상태를 업데이트하는 데 사용할 작업을 정의합니다. 우리의 경우 두 가지 작업을 정의하겠습니다. 하나는 장바구니에 항목을 추가하는 작업이고 다른 하나는 항목을 제거하는 작업입니다.

const actions = {
    addToCart(item) {
        return {
            type: 'ADD_TO_CART',
            item
        };
    },
    removeFromCart(itemId) {
        return {
            type: 'REMOVE_FROM_CART',
            itemId
        };
    }
};

3단계: 리듀서 생성
리듀서는 전달된 작업을 수신하고 그에 따라 상태를 업데이트합니다. 다음은 작업이 전달될 때 카트를 업데이트하는 감속기입니다.

const reducer = (state = DEFAULT_STATE, action) => {
    switch (action.type) {
        case 'ADD_TO_CART':
            return {
                ...state,
                cart: [...state.cart, action.item]
            };
        case 'REMOVE_FROM_CART':
            return {
                ...state,
                cart: state.cart.filter((item) => item.id !== action.itemId)
            };
        default:
            return state;
    }
};

4단계: 선택기 생성
선택기는 상태에서 특정 데이터를 검색하는 데 도움이 됩니다. 예를 들어 장바구니에 있는 모든 항목을 가져오려면 다음과 같은 선택기를 만듭니다.

const selectors = {
    getCartItems(state) {
        return state.cart;
    }
};

5단계: 스토어 생성 및 등록
마지막으로 @wordpress/data 패키지를 사용하여 스토어를 만들고 등록하겠습니다. 이렇게 하면 WordPress 사이트 전체에서 전 세계적으로 스토어에 액세스할 수 있습니다.

import { createReduxStore, register } from '@wordpress/data';

const store = createReduxStore('my-cart-store', {
    reducer,
    actions,
    selectors,
});

register(store);

6단계: 구성 요소에서 저장소 사용
상점이 등록되면 구텐베르그 블록이나 구성 요소에서 사용할 수 있습니다. 예를 들어, 장바구니에 항목을 추가하려면:

import { useDispatch } from '@wordpress/data';

const { addToCart } = useDispatch('my-cart-store');
addToCart({ id: 1, name: 'Sample Item' });

장바구니에 있는 항목을 가져오려면:

import { useSelect } from '@wordpress/data';

const cartItems = useSelect((select) => select('my-cart-store').getCartItems());

결론

리듀서, 액션, 선택기의 역할을 이해하면 @wordpress/data를 사용하여 WordPress Gutenberg 프로젝트의 전역 상태를 쉽게 관리할 수 있습니다. 이러한 구조화된 접근 방식을 사용하면 데이터를 보다 효율적으로 관리할 수 있어 블록과 구성요소를 더욱 강력하고 대화형으로 만들 수 있습니다.

@wordpress/data를 사용하면 전체 WordPress 애플리케이션의 상태를 처리하기 위한 안정적이고 확장 가능한 솔루션을 갖게 됩니다. 다음 구텐베르그 프로젝트에서 시도해 보세요!