Livewire 이벤트 송신 및 수신

Livewire 에서 이벤트 발생 시키기

$this->dispatch();

Livewire 컴포넌트에서 이벤트를 발생시키는 방법이다. 

 

Livewire -> Livewire, Alpine.js, JS

// Livewire Component

$this->dispatch('modal-open');

// 이벤트 받기
#[On('modal-open')]
public function handlePostCreated(): void
{
    // 이 컴포넌트에서만 실행됨
    // 예: 폼 초기화, 상태 리셋
    $this->reset();
}

//Alpine.js 에서 받기

<div
    x-data="{ open: false }"
    @modal-open.window="open = true"
>
    <div x-show="open">모달</div>
</div>

 

$this->dispatch(); 함수는 Livewire 또는 Alpine.js 로 송신할 수 있는데,

Livewire 에서는 #On[이벤트명] 으로 받고, Alpine.js 에서는 @이벤트명 으로 수신한다.

 

Livewire 컴포넌트에서 단순하게 DOM 이벤트로 보낼려면

$this->dispatchBrowserEvent('modal-open');

-> Alpine, Vanilla JS, 다른 프레임워크도 수신 가능한 방식이다.

 

- Livewire 함수에 #[On('post-created')] 속성을 추가하면 이벤트 발생시 함수가 실행된다.

- 단점은 같은 이름으로 이벤트 속성을 다른 함수에 추가하면 함수가 실행되는데, 유지 보수시에 파악하기가 힘들다.

- 따라서 이벤트 송시시 스코프를 추가해야 의도를 정확히 파악할 수 있다.

$this->dispatch('modal-open')->self();

$this->dispatch('modal-open')->to();

 

Livewire 송신을 Alpine.js 와 Javascript 에서 받는 방법

Alpine.js 에서 수신방법

<div
    x-data="{ show: false }"
    @post-created.window="show = true"
>
    <div x-show="show">
        저장되었습니다.
    </div>
</div>

 

Vanilla JS 에서 Livewire.on 을 사용한다.

<script>
    Livewire.on('post-created', (payload) => {
        console.log(payload)
    })
</script>

 

물론 Livewire.on() 함수를 Alpine.js 에서도 사용 가능하다.

다른 방식으로 Alpine.js 에서 스코프를 한정할 수 있는 @this.on() 방식도 있다. (현재 Livewire 컴포넌트 전용 수신방법)

 

지금까지는 Livewire 에서 송신하는 방법과 그걸 받는 Alpine.js, Vanilla JS 수신방법이다.

실무 기준 선택 가이드

• UI 반응만 필요 → dispatchBrowserEvent
• 특정 Livewire 컴포넌트만 반응 → @this.on, $wire.on
• 전역 JS 연동 → Livewire.on

---

Alpine.js 와 Vanilla JS 에서 Livewire 이벤트 송신 방법

 

Alpine.js 에서는 매직 키워드 $wire.dispatch() 를 사용한다.

<div x-data>
    <button
        @click="$wire.dispatch('refresh-list', { page: 1 })"
    >
        목록 새로고침
    </button>
</div>

 

Vanilla JS 에서는 Livewire.dispatch(); 를 사용한다.

<script>
    Livewire.dispatch('post-created', { id: 1 })
</script>

 

---

[참고]

Alpine.js 에서 이벤트 송수신 방법

$dispatch()

 

Alpine.js -> Alpine.js, js, dom

<div x-data>
    <button @click="$dispatch('post-created', { id: 123 })">
        이벤트 송신
    </button>
</div>

 

동일 코드에서 수신

<div x-data @post-created="console.log($event.detail)"></div>

 

전역 수신

<div x-data @post-created.window="console.log($event.detail)"></div>

 

$wire.dispatch()

 

Alpine.js -> Livewire

<div x-data>
    <button
        @click="$wire.dispatch('refresh-list', { page: 1 })"
    >
        목록 새로고침
    </button>
</div>

use Livewire\Attributes\On;

#[On('refresh-list')]
public function refreshList($page = 1): void
{
    // $page 활용
}

 

 

window.dispatchEvent()

 

Alpine.js -> JS (순수 DOM 이벤트)

<button
    x-data
    @click="window.dispatchEvent(new CustomEvent('ui:toast', { detail: { message: '저장 완료' } }))"
>
    Toast
</button>

window.addEventListener('ui:toast', (e) => {
    console.log(e.detail.message)
})

 

 

JS 에서 Livewire 송수신 방법 

JS -> Livewire (송신)

Livewire.dispatch() 

Livewire.dispatchTo()

 

<script>
    // JS → 모든 Livewire 컴포넌트로 이벤트 송신
    Livewire.dispatch('post-created', {
        postId: 10,
        title: 'Hello Livewire'
    })
</script>

<script>
    // 특정 컴포넌트 이름으로 타겟팅
    Livewire.dispatchTo(
        'post-list',          // Livewire 컴포넌트 이름 (케밥 케이스)
        'post-created',
        { postId: 20 }
    )
</script>

use Livewire\Component;
use Livewire\Attributes\On;

class PostList extends Component
{
    #[On('post-created')]
    public function handlePostCreated($postId, $title): void
    {
        // JS에서 보낸 payload 수신
        // $postId === 10
        // $title === 'Hello Livewire'
    }

    public function render()
    {
        return view('livewire.post-list');
    }
}

 

 

JS (수신)

Livewire.on()

<script>
    Livewire.on('post-created', (payload) => {
        console.log('JS 수신:', payload.postId)
    })
</script>