라라벨을 설치하고 실행한다
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 를 누르면 로컬에서 증가된 값에서 업데이트가 이어지는걸 볼수있다.
'개발 > PHP' 카테고리의 다른 글
| [Laravel AtoZ] 2. Livewire 살펴보기 (0) | 2024.04.24 |
|---|---|
| Alpine.js 한방정리 (0) | 2024.04.11 |
| 4. 함수 (0) | 2024.03.29 |
| 3. 상수와 변수 (0) | 2024.03.29 |
| 2. 타입 (0) | 2024.03.28 |