본문으로 건너뛰기

이벤트

이벤트는 호스트 → 클라이언트로만 흐르고, 계약에서 액션 옆자리에 선언합니다:

export const location = definePlugin(
'location',
{ get: action<void, Position>() },
{ events: { updated: event<Position>() } }
);

구독 (클라이언트)​

usePlugin을 거치면 이벤트 이름은 짧아지고 타입이 붙습니다:

const { on } = usePlugin(location);

useEffect(
() =>
on('updated', (position) => {
// ^? Position
setPosition(position);
}),
[]
);

브릿지에 풀 네임으로 직접 구독해도 됩니다 — React라면 useEvent('location.updated', handler), 어디서든 bridge.on('location.updated', handler).

송신 (호스트)​

sendEvent는 병합된 플러그인 이벤트 맵으로 타입이 붙습니다. 계약에 있는 이벤트는 페이로드 검사와 자동완성을 받고, 계약 밖의 커스텀 이벤트 이름도 막지는 않습니다(열린 이벤트 집합):

const { sendEvent } = useBridgeHost({ plugins: [location.host(handlers)] });

sendEvent('location.updated', { lat: 37.5, lng: 127.0 }); // ✅ 페이로드 검사됨
sendEvent('location.updated', { lat: 'x' }); // ❌ 컴파일 에러
sendEvent('app.custom', { anything: true }); // ✅ 열린 집합

플러그인 핸들러 안의 ctx.emit은 짧은 이름을 쓰고, 해당 플러그인의 이벤트 타입으로 고정됩니다:

location.host({
get: async (_payload, ctx) => {
ctx.emit('updated', { lat, lng }); // ✅ 타입 검사됨
ctx.emit('nope', {}); // ❌ 컴파일 에러
return { lat, lng };
},
});

이벤트 스키마​

event(schema)를 쓰면 클라이언트가 들어오는 이벤트 페이로드를 검증합니다. 검증에 실패한 이벤트는 전달되지 않고 버려지며, 실패는 전역 onError로 알려집니다. 스키마 검증을 참고하세요.

타깃팅​

WebView가 여러 개라면 이벤트를 특정 하나에 보내거나 전체에 브로드캐스트할 수 있습니다 — 멀티 WebView 라우팅에서 다룹니다.