[Laravel AtoZ] 2. Livewire 살펴보기

Livewire 살펴보기

이전 로그인 생성할때 사용했던 라이브와이어에 대해 좀더 자세히 살펴보겠습니다.

 

라라벨의 프론트앤드를 작성할때 SPA방식의 웹페이지를 구현해야될 필요가 있다면 Vue와 React도 좋은 선택이지만

Laravel에서는 Livewire라는 선택지도 존재합니다.

서버와 프론트앤드에서 모두 PHP문법을 적극적으로 사용할수있는 장점이 있습니다.

 

Full-Page Component

일반적으로 라이브와이어 사용방법을 찾아보면 inline component 로 구현한 예제를 많이 볼수있습니다. (like Jetstream)

하지만 우리는 로그인을 구현할때 full-page component 로 구현했고 그 주된 이유는 SPA 패러다임에 입각하여 만들기 위해서 입니다.

Blade와 Livewire를 SPA로 사용하지 않고 MPA로 부분적인 컴포넌트 랜더링을 적용할 수도 있지만

SPA에 많은 장점들을 가져가기위해서는 full-page component 를 쓰는게 가장 편합니다

 

Lifecyle Hook

가장 많이 쓰게될 hook은 mount() 와 boot() 입니다

• mount() : 클래스의 __construct 컴포넌트 생성자로서 컴포넌트 내 초기값을 세팅할때 사용합니다.
• boot() : 뷰에서 컴포넌트로 이벤트를 요청할때마다 호출합니다.

여기서 주목할 부분은 boot() 입니다

Laravel은 기본적으로 PHP의 Stateless 특성을 공유하기에 요청라이프사이클에따라 인스턴스가 생성되고 소멸됩니다.

즉 Livewire에서 Dependency Injection 을 하기위해서는 뷰에서 컴포넌트로 이벤트를 요청할때마다 바인드된 인스턴스를 호출해야합니다, 그러므로 DI는 boot() 영역에 들어갑니다 (like UserCreate의 CreateNewUser)

 

Alpinejs

Livewire를 좀더 풍부하게 사용하기위해서는 Alpinejs를 같이 사용하여아합니다.

알파인이 왜 필요한지를 알기위해서는 라이브와이어의 동작방식을 확인해봐야될 필요가 있습니다.

뷰가 컴포넌트 이벤트를 호출하면 브라우저는 서버로 /livewire/update 를 호출합니다

페이로드에는 snapshot 과 updates 가 포함되어있으며 스냅샷에는 이전에 호출한 내용이 있고 updates 에는 변경된 컴포넌트 속성이 포함되어 있습니다.

라이브와이어는 이런식으로 속성값을 관리하는데, 간혹 서버와 통신하지않고 속성값을 활용해야될 필요가 있습니다.

이때 알파인은 도움을 줍니다

예를들어 인풋값에 입력하면 똑같은 값이 레이블에 실시간으로 반영되는 이벤트를 만들때

<div x-data>
    <label>{{$email}}</label>
    <input wire:model="email" type="text" id="email" name="email">
    <button wire:click="click">click</button>
</div>

 

이렇게만 해두면 인풋값에 아무리값을 넣어봐도 변경되지 않고 버튼을 클릭해야 값이 변경되는데

<div x-data>
    <label x-text="$wire.email"></label>
    <input wire:model="email" type="text" id="email" name="email">
    <button wire:click="click">click</button>
</div>

 

이런식으로 알파인JS를 사용하면 좀더 다이나믹한 느낌을 살릴수 있습니다.