wp-interactivity-api은(는) 무엇을 하나요?
WordPress Interactivity API 기능(data-wp-* 지시문, @wordpress/interactivity 스토어/상태/액션, 블록 viewScriptModule 통합, wp_interactivity_*())을 구축하거나 디버깅할 때 사용합니다. 성능, 하이드레이션, 지시문 동작을 포함합니다.
주요 기능
- data-wp- 지시문*: 프론트엔드에서 선언적으로 상호작용을 정의합니다.
- @wordpress/interactivity 패키지: 스토어, 상태, 액션을 관리합니다.
- viewScriptModule 통합: 블록에 클라이언트 측 JavaScript를 추가합니다.
- wp_interactivity_*() PHP 함수: 서버 측에서 초기 상태를 설정합니다.
사용 예시
// @wordpress/interactivity 스토어 예시
const { store } = window.wp.interactivity;
store('my-block', {
state: {
count: 0,
},
actions: {
increment() {
this.state.count++;
},
},
});
<!-- data-wp-* 지시문 예시 -->
<div data-wp-interactive="my-block">
<span data-wp-text="state.count">0</span>
<button data-wp-on--click="actions.increment">증가</button>
</div>
// PHP에서 초기 상태 설정
$context = array('count' => 5);
wp_interactivity_state('my-block', $context);