Laravel Jetstream Livewire

Laravel Livewire는 Laravel Blade를 템플릿 언어로 사용하여 현대적이고 반응적이며 동적인 인터페이스를 간단하게 구축할 수 있는 라이브러리입니다. 동적이고 반응적인 애플리케이션을 구축하고 싶다면 이 스택을 선택하는 것이 좋으며, Vue.js와 같은 전체 JavaScript 프레임워크에 대한 훌륭한 대안입니다.

Livewire를 사용할 때, 애플리케이션의 라우트는 일반적인 Blade 템플릿으로 응답합니다. 그러나 이러한 템플릿 내에서 필요에 따라 Livewire 컴포넌트를 렌더링할 수 있습니다:

 

<div class="mt-4">
    @livewire('server-list')
</div>

 

Livewire 스택을 사용할 때, Jetstream은 몇 가지 독특한 기능을 가지고 있는데, 이에 대해 알아야 합니다. 아래에서 이러한 기능들에 대해 각각 논의하겠습니다.

Components

Jetstream Livewire 스택을 만들 때, UI의 일관성과 사용의 용이성을 돕기 위해 다양한 Blade 컴포넌트(버튼, 패널, 입력창, 모달 등)가 생성되었습니다. 이러한 컴포넌트들을 사용할지 여부는 자유롭게 결정할 수 있습니다. 이 모든 컴포넌트들은 애플리케이션의 resources/views/components 디렉토리 안에 위치해 있습니다.

애플리케이션의 resources/views 디렉토리 안에 있는 Jetstream의 기존 뷰들에서 이러한 컴포넌트들이 어떻게 사용되고 있는지 검토함으로써 이러한 컴포넌트들을 사용하는 방법에 대한 통찰을 얻을 수 있습니다.

 

Modals

Jetstream Livewire 스택의 대부분 컴포넌트는 백엔드와 통신하지 않습니다. 그러나 Jetstream에 포함된 Livewire 모달 컴포넌트들은 열려있는지/닫혀있는지 상태를 결정하기 위해 Livewire 백엔드와 상호작용합니다.

또한, Jetstream은 두 가지 유형의 모달을 포함하고 있습니다: dialog-modal과 confirmation-modal. confirmation-modal은 삭제와 같은 파괴적인 행동을 확인할 때 사용될 수 있으며, dialog-modal은 보다 일반적인 모달 창으로 언제든지 사용될 수 있습니다.

모달 사용을 예시하자면, 다음과 같은 모달은 사용자가 자신의 계정을 삭제하고 싶다는 것을 확인하는 데 사용될 수 있습니다:

 

<x-confirmation-modal wire:model="confirmingUserDeletion">
    <x-slot name="title">
        Delete Account
    </x-slot>

    <x-slot name="content">
        Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted.
    </x-slot>

    <x-slot name="footer">
        <x-secondary-button wire:click="$toggle('confirmingUserDeletion')" wire:loading.attr="disabled">
            Nevermind
        </x-secondary-button>

        <x-danger-button class="ml-2" wire:click="deleteUser" wire:loading.attr="disabled">
            Delete Account
        </x-danger-button>
    </x-slot>
</x-confirmation-modal>

 

보시다시피, 모달의 열기/닫기 상태는 컴포넌트에 선언된 wire:model 속성에 의해 결정됩니다. 속성의 이름은 Livewire 컴포넌트의 해당 PHP 클래스의 불린 속성과 일치해야 합니다. 일반적으로 사용자가 애플리케이션의 UI 요소를 클릭하여 모달을 열어야 할 때 이 속성을 true로 설정합니다. 물론 모달을 닫을 준비가 되었을 때 속성은 false로 설정해야 합니다.

모달의 내용은 세 개의 Blade 컴포넌트 슬롯인 title, content, footer를 채워 넣음으로써 지정될 수 있습니다.