Livewire는 특별히 프론트엔드 개발을 목표로 하는 Laravel 생태계에서 가장 중요한 프로젝트 중 하나입니다. 최근 Livewire v3가 출시되었는데, Livewire가 무엇인지, 어떤 프로젝트가 해당 아키텍처에 적합한지 살펴보겠습니다.
Livewire의 특징은 전용 JavaScript 프레임워크를 사용할 필요 없이 "현대적인" 웹 애플리케이션을 개발할 수 있다는 것입니다.
Livewire를 사용하면 프런트엔드와 백엔드가 분리되어 프로젝트의 복잡성을 관리할 필요 없이 Vue 또는 React에서 제공하는 것과 동일한 수준의 반응성을 제공하는 블레이드 구성 요소를 개발할 수 있습니다. Laravel 및 Blade 템플릿 범위 내에서 애플리케이션 개발을 계속할 수 있습니다.
Livewire는 Laravel 프로젝트에 추가할 수 있는 Composer 패키지입니다. 그런 다음 적절한 블레이드 지시어를 사용하여 각 HTML 페이지(또는 단일 페이지 응용 프로그램을 생성하려는 경우 페이지)에서 활성화해야 합니다. Livewire 구성 요소는 특정 프런트엔드 구성 요소가 작동하고 렌더링되어야 하는 방식에 대한 논리를 포함하는 PHP 클래스와 블레이드 파일로 구성됩니다.
브라우저에서 Livewire가 사용되는 페이지에 액세스하도록 요청하면 다음과 같은 일이 발생합니다.
Vue 및 React의 기능과 매우 유사하지만 이 경우 상호작용에 응답하는 반응성 로직은 자바스크립트 측이 아닌 백엔드에서 관리됩니다.
논리적 이해를 돕기 위해 아래에서 비교 예를 보여드리겠습니다.
개발자 중심 회사를 구축하는 데 따른 어려움에 대해 자세히 알아보려면 Linkedin이나 X에서 저를 팔로우하세요.
Livewire 설치는 최소한입니다. Laravel 프로젝트에 Composer 패키지를 설치하고 필요한 블레이드 지시어를 모든 페이지(또는 프로젝트의 모든 블레이드 템플릿이 파생되는 공통 레이아웃)에 추가하세요.
composer require livewire/livewire
<html>
<head>
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>
Composer 패키지가 설치되면 새로운 Artisan make 하위 명령을 사용하여 새로운 Livewire 구성요소를 생성할 수 있습니다. 각 구성 요소는 PHP 클래스와 블레이드 보기로 만들어집니다.
블레이드의 클래스 기반 구성요소와 유사합니다.
php artisan make:livewire SpyInput COMPONENT CREATED ? CLASS: app/Http/Livewire/SpyInput.php VIEW: resources/views/livewire/spy-input.blade.php
이 예의 구성요소는 JavaScript 코드를 작성할 필요 없이 HTML 입력 필드에 작성된 내용을 "감시"합니다.
그런 다음 구성 요소 클래스에 공용 속성을 삽입합니다.
// app/Http/Livewire/SpyInput.php
namespace App\Livewire;
use Livewire\Component;
class SpyInput extends Component
{
public string $message;
public function render()
{
return view('livewire.spy-input');
}
}
다음과 같이 구성요소 뷰를 구현합니다.
// resources/views/livewire/spy-input.blade.php
<div>
<label>Type here:</label>
<input type="text" wire:model="message"/>
<span>You typed: <span>{{ $message }}</span></span>
</div>
마지막으로 Livewire 구성 요소를 블레이드 보기에 배치합니다.
<html>
<head>
@livewireStyles
</head>
<body>
<livewire:spy-input />
@livewireScripts
</body>
</html>
일반 블레이드 구성 요소에서는 구성 요소 클래스의 모든 공개 속성이 블레이드 템플릿에 표시됩니다. 그래서 {{ $message }} $message 속성 값이 자동으로 표시됩니다. 그러나 일반 클래스 기반 구성 요소에서는 첫 번째 구성 요소 렌더링에서만 이러한 현상이 발생합니다. 입력 필드에 무언가를 입력해도 스팬 태그에는 아무런 변화가 없습니다.
그러나 Livewire 구성 요소에서는 필드에 wire:model="message" 속성을 사용했습니다. 이 속성은 입력 필드의 값이 PHP 클래스의 $message 속성에 연결되도록 합니다. 입력 필드에 새 값을 쓰면 서버로 전송됩니다. 서버는 $message의 값을 업데이트하고 새 렌더링을 수행한 다음 프런트엔드로 다시 보낸 다음 {{의 텍스트를 업데이트합니다. $메시지 }}.
브라우저 개발 도구의 네트워크 탭을 열면 키보드의 각 키를 누를 때마다 아래 경로로 서버를 호출하는 것을 확인할 수 있습니다.
/livewire/message/<COMPONENT-NAME>
각 호출에 대한 응답에는 구성 요소에 대해 새로 렌더링된 HTML이 포함되어 있으며 Livewire가 이전 페이지 대신 페이지에 삽입합니다. 다양한 사용자 정의 와이어 속성을 사용할 수 있습니다. 예를 들어 버튼을 클릭하면 구성 요소 클래스의 공개 메서드를 실행할 수 있습니다. 다음은 입찰의 예입니다.
<button wire:click="doSomething">Click Here</button>
class SpyInput extends Component
{
public function doSomething()
{
// Your code here…
}
}
여기서 doSomething은 Livewire 구성 요소 PHP 클래스의 공개 메서드입니다.
The PHP class connected to the component behaves like any other PHP class in a Laravel project. The only difference is that it uses the mount method instead of the classic __construct class constructor to initialize the public properties of the class.
{{-- Initial assignment of the the $book property in the ShowBook class --}}
<livewire:show-book :book="$book">
class ShowBook extends Component
{
public $title;
public $excerpt;
// "mount" instead of "__constuct"
public function mount(Book $book = null)
{
$this->title = $book->title;
$this->excerpt = $book->excerpt;
}
}
You can also use the protected property $rules to configure the validation restrictions on the data sent from the frontend to the backend. You have to call the validate() method to validate the data:
<form wire:submit.prevent="saveBook">
<input type="text" wire:model="title"/>
@error('title') <span class="error">{{ $message }}</span> @enderror
<input type="text" wire:model="excerpt"/>
@error('excerpt') <span class="error">{{ $message }}</span> @enderror
<input type="text" wire:model="isbn"/>
@error('isbn') <span class="error">{{ $message }}</span> @enderror
<button type="submit">Save Book</button>
</form>
class BookForm extends Component
{
public $title;
public $excerpt;
public $isbn;
protected $rules = [
'title' => ['required', 'max:200'],
'isbn' => ['required', 'unique:books', 'size:17'],
'excerpt' => 'max:500'
];
public function saveBook()
{
$validated = $this->validate($this->rules);
Book::create($validated);
return redirect()->to('/books);
}
}
Or you can use PHP Attributes to declare the desired validation rules for a class property:
class BookForm extends Component
{
#[Validate('required|max:200')]
public $title;
#[Validate('required|unique:books|size:17')]
public $isbn;
#[Validate('max:500')]
public $excerpt;
public function saveBook()
{
$this->validate();
Book::create([
'title' => $this->title,
'isbn' => $this->isbn,
'excerpt' => $this->excerpt,
]);
return redirect()->to('/books);
}
}
In general, each Livewire component behaves in the ways that a Laravel developer expects from a PHP class inside a Laravel project. Thus allowing the creation of reactive web interfaces without the need to separate the development projects between Laravel and Vue/React.
Inspector is a Code Execution Monitoring tool specifically designed for software developers. You don't need to install anything at the server level, just install the Laravel package and you are ready to go.
If you are looking for HTTP monitoring, database query insights, and the ability to forward alerts and notifications into your preferred messaging environment, try Inspector for free. Register your account.
Or learn more on the website: https://inspector.dev
위 내용은 Laravel Livewire: 정의 및 웹 앱에서 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
