Livewire 한방 정리

개발/PHP

Livewire 한방 정리

희묭 2024. 4. 8. 17:54

라라벨을 설치하고 실행한다

composer create-project laravel/laravel:^11.0 example-app
php artisan serve

npm install
npm run dev

라이브와이어를 설치한다

composer require livewire/livewire

이제 준비가 끝났다.

1. 간단한 액션만들기

라이브와이어 오브젝트를 생성하는 artisan 명령어를 입력한다

Counter.php 와 counter.blade.php 가 생성된다

php artisan make:livewire counter

Counter.php

class Counter extends Component
{
    public $count = 1;

    public function increment($addValue)
    {
        $this->count = $this->count + $addValue;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

counter.blade.php

<div>
    Count: {{$count}}
    <button wire:click="increment(1)">+</button>
</div>

welcome.blade.php 파일을 다음과같이 수정한다

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <body>
        @livewire('counter')
    </body>
</html>

라이브와이어는 아래처럼 alphinJs 와 섞어서 사용이 가능하며 대부분의 경우 그렇게 사용하여야 한다

<div x-data>
    {{$count}}
    <p><button wire:click="increment">wire add</button></p>

    <p><label x-text="$wire.count"></label></p>
    <p><button x-on:click="$wire.count++">x local add</button></p>
    <p><button x-on:click="$wire.increment()">x add</button></p>
</div>

x local add 를 눌러서 카운트값을 증가시킨뒤 x add 를 누르면 로컬에서 증가된 값에서 업데이트가 이어지는걸 볼수있다.