[Livewire] 라이브와이어

Livewire란?

javascript를 사용하지 않고 라라벨과 블레이드만으로도 동적페이지 생성이 가능한 도구이다.

복잡해진 javascript 사용을 대신하기위해 만들어졌다.

 

Livewire동작원리

공식사이트에 올라온 동작원리 설명

• Livewire는 페이지와 함께 초기 구성 요소 출력을 렌더링합니다 (예 : Blade include). 이렇게하면 SEO 친화적입니다.
• 상호 작용이 발생하면 Livewire는 업데이트 된 데이터로 서버에 AJAX 요청을 보냅니다.
• 서버는 구성 요소를 다시 렌더링하고 새 HTML로 응답합니다.
• 그런 다음 Livewire는 변경된 사항에 따라 DOM을 지능적으로 변경합니다.

 

Livewire설치하기

1. 라라벨 프로젝트 설치

홈스테드에 livewire를 테스트할 프로젝트(blog)를 따로 생성했다.

composer create-project --prefer-dist laravel/laravel blog

기본 라라벨 프로젝트 생성

2. 라라벨 프로젝트에 livewire 추가

composer require livewire/livewire

composer.json에서 livewire 패키지가 추가된 것을 확인 할 수 있다.

3. livewire스타일과 스크립트 추가하기

먼저 welcome.blade를 수정한다.

head태그에 @livewireStyles 추가

body태그에 @livewireScripts 추가

 

컴포넌트 추가

컴포넌트를 추가해서 뷰를 랜더링 하는방식.

 

해당 프로젝트 위치로 가서 counter component를 추가한다.

php artisan make:livewire counter

하나의 클래스와 뷰가 생성되었다.

Counter 클래스를 확인해보면 render함수가 있다.

모든 클래스 또는 컴포넌트가 render함수를 가지고 있다.

Counter 클래스

counter블레이드를 보자.

비어있는 div태그에 텍스트를 넣어본다.

이렇게 만들어진 counter component를 사용해보자.

다시 welcome.blade.php로 이동한다.

body 영역에 livewire counter component를 추가한다.

테스트 페이지를 새로고침 해본다.

아래에 counter 블레이드에 작성했던 내용이 출력된다.

카운터 컴포넌트 내용 출력

 

 

컴포넌트 메소드 호출

counter블레이드를 수정한다.

버튼 두개와 <h1>태그 하나를 생성한다.

+ 버튼을 누르면 숫자가 증가하고 - 버튼을 누르면 숫자가 감소하도록 만들예정이다.

소스코드

 

실행화면

버튼에 클릭이벤트를 추가하여 클래스에 있는 메소드를 호출 할 예정이다.

이벤트를 추가하는 공식은 아래와 같다.

wire:[dispatched browser event]="[action]"

버튼에 클릭이벤트 추가

버튼을 클릭하면 Counter클래스의 increment함수와 decrement함수를 호출하게된다.

javascript영역을 livewire가 해주는것이다.

Counter클래스에 함수를 생성해보자.

increment함수는 count값을 증가시키고

decrement함수는 count값을 감소시킨다.
그리고 count를 counter블레이드로 넘긴다.

실행해본다.

잘된다.