Laravel Livewire: 정의 및 웹 앱에서 사용하는 방법

Livewire는 특별히 프론트엔드 개발을 목표로 하는 Laravel 생태계에서 가장 중요한 프로젝트 중 하나입니다. 최근 Livewire v3가 출시되었는데, Livewire가 무엇인지, 어떤 프로젝트가 해당 아키텍처에 적합한지 살펴보겠습니다.

Livewire의 특징은 전용 JavaScript 프레임워크를 사용할 필요 없이 "현대적인" 웹 애플리케이션을 개발할 수 있다는 것입니다.

Livewire를 사용하면 프런트엔드와 백엔드가 분리되어 프로젝트의 복잡성을 관리할 필요 없이 Vue 또는 React에서 제공하는 것과 동일한 수준의 반응성을 제공하는 블레이드 구성 요소를 개발할 수 있습니다. Laravel 및 Blade 템플릿 범위 내에서 애플리케이션 개발을 계속할 수 있습니다.

라이브와이어 작동 방식

Livewire는 Laravel 프로젝트에 추가할 수 있는 Composer 패키지입니다. 그런 다음 적절한 블레이드 지시어를 사용하여 각 HTML 페이지(또는 단일 페이지 응용 프로그램을 생성하려는 경우 페이지)에서 활성화해야 합니다. Livewire 구성 요소는 특정 프런트엔드 구성 요소가 작동하고 렌더링되어야 하는 방식에 대한 논리를 포함하는 PHP 클래스와 블레이드 파일로 구성됩니다.

브라우저에서 Livewire가 사용되는 페이지에 액세스하도록 요청하면 다음과 같은 일이 발생합니다.

• 페이지는 Blade를 사용하여 생성된 모든 페이지와 마찬가지로 구성 요소의 초기 상태로 렌더링됩니다.
• 구성 요소 UI가 상호 작용을 실행하면 Livewire 구성 요소와 발생한 상호 작용 및 구성 요소의 상태를 나타내는 적절한 경로에 대한 AJAX 호출이 이루어집니다.
• 데이터는 구성 요소의 PHP 부분에서 처리되어 상호 작용의 결과로 새로운 렌더링을 수행하고 이를 다시 브라우저로 보냅니다.
• 서버에서 받은 변경사항에 따라 페이지의 DOM이 변경됩니다.

Vue 및 React의 기능과 매우 유사하지만 이 경우 상호작용에 응답하는 반응성 로직은 자바스크립트 측이 아닌 백엔드에서 관리됩니다.

논리적 이해를 돕기 위해 아래에서 비교 예를 보여드리겠습니다.

개발자 중심 회사를 구축하는 데 따른 어려움에 대해 자세히 알아보려면 Linkedin이나 X에서 저를 팔로우하세요.

Laravel Livewire 설치 방법

Livewire 설치는 최소한입니다. Laravel 프로젝트에 Composer 패키지를 설치하고 필요한 블레이드 지시어를 모든 페이지(또는 프로젝트의 모든 블레이드 템플릿이 파생되는 공통 레이아웃)에 추가하세요.

composer require livewire/livewire

    ...

    @livewireStyles


    ...

    @livewireScripts

Laravel Livewire 구성 요소를 생성하는 방법

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 구성 요소를 블레이드 보기에 배치합니다.

    @livewireStyles



    <spy-input></spy-input>

    @livewireScripts

일반 블레이드 구성 요소에서는 구성 요소 클래스의 모든 공개 속성이 블레이드 템플릿에 표시됩니다. 그래서 {{ $message }} $message 속성 값이 자동으로 표시됩니다. 그러나 일반 클래스 기반 구성 요소에서는 첫 번째 구성 요소 렌더링에서만 이러한 현상이 발생합니다. 입력 필드에 무언가를 입력해도 스팬 태그에는 아무런 변화가 없습니다.

그러나 Livewire 구성 요소에서는 필드에 wire:model="message" 속성을 사용했습니다. 이 속성은 입력 필드의 값이 PHP 클래스의 $message 속성에 연결되도록 합니다. 입력 필드에 새 값을 쓰면 서버로 전송됩니다. 서버는 $message의 값을 업데이트하고 새 렌더링을 수행한 다음 프런트엔드로 다시 보낸 다음 {{의 텍스트를 업데이트합니다. $메시지 }}.

브라우저 개발 도구의 네트워크 탭을 열면 키보드의 각 키를 누를 때마다 아래 경로로 서버를 호출하는 것을 확인할 수 있습니다.

/livewire/message/<component-name>
</component-name>

각 호출에 대한 응답에는 구성 요소에 대해 새로 렌더링된 HTML이 포함되어 있으며 Livewire가 이전 페이지 대신 페이지에 삽입합니다. 다양한 사용자 정의 와이어 속성을 사용할 수 있습니다. 예를 들어 버튼을 클릭하면 구성 요소 클래스의 공개 메서드를 실행할 수 있습니다. 다음은 입찰의 예입니다.

<button wire:click="doSomething">Click Here</button>

class SpyInput extends Component
{
    public function doSomething()
    {
        // Your code here…
    }
}

여기서 doSomething은 Livewire 구성 요소 PHP 클래스의 공개 메서드입니다.

Integration with other Laravel features

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 --}}
<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;
    }
}
</show-book>

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:

@error('title') {{ $message }} @enderror @error('excerpt') {{ $message }} @enderror @error('isbn') {{ $message }} @enderror Save Book

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.

Monitor your Laravel application for free

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!