Livewire 버전 4에서 컴포넌트 생성하기 (pages::articles.list 컴포넌트 생성)

이번 포스트에서는 라라벨 Livewire 4 환경에서 새로운 컴포넌트를 생성하는 방법을 살펴보겠다.

버전 4로 업데이트되면서 이전 버전 3와 비교해 컴포넌트의 구조와 생성 방식이 새로워졌으니, 어떤 차이점이 있는지 정리해 보겠다.

이전 포스트

라라벨의 Soft Delete 기능에 대해 알아보자. (categories와 articles 테이블 추가)

라라벨에서 Category와 Article 모델 및 마이그레이션 파일을 생성하며, DB에서 실제 데이터를 지우지 않고 휴지통처럼 안전하게 관리하는 Soft Delete(softDeletes) 기능의 원리와 설정법을 정리했습니다.

Livewire의 컴포넌트를 생성해 보자

Components | Laravel Livewire

Livewire components are essentially PHP classes with properties and methods that can be called directly from a Blade template.

livewire.laravel.com

오늘의 포스트와 관련된 Livewire 공식 문서의 링크다.

이 포스트에서는 이 문서의 내용의 일부만 소개할 테니, 더 자세한 내용은 공식 문서를 참고하자.

php artisan make:livewire articles.list

일단 이 명령어가 기본적인 Livewire 4에서 컴포넌트를 생성하는 명령어다.

위의 명령어를 실행하면, resources/views/components 디렉터리 안에서 articles 디렉터리가 생기고, 그 안에⚡list.blade.php 파일이 생긴다.

그런데 이 프로젝트에서는 아래의 명령어로 Livewire 컴포넌트를 생성할 거다.

make bash #컨테이너 안으로 들어간다.
php artisan make:livewire pages::articles.list

ubuntu 혹은 VSCode의 터미널에서 이 명령어들을 실행한다.

위의 명령어처럼 pages:: 네임스페이스 플래그를 붙여 생성하는 방식은 resources/views/pages/articles 디렉터리가 생기고, 그 안에⚡list.blade.php 파일이 생긴다.

Livewire 4에서는 Livewire 컴포넌트 앞에 ⚡이모지가 붙는다.

이 표시로 인해 Livewire 컴포넌트인지, 일반 Blade 컴포넌트인지 한눈에 쉽게 구분할 수 있을 것 같다.

두 Livewire 컴포넌트의 차이

구분	일반 Livewire 컴포넌트	페이지 Livewire 컴포넌트
생성 명령어	php artisan make:livewire articles.list	php artisan make:livewire pages::articles.list
저장 경로	resources/views/components/	resources/views/pages/
핵심 역할	화면 내 특정 영역을 담당하는 독립 상태 부품	routes/web.php에서 라우팅 해서 화면 전체를 구성
사용 예시	실시간 검색바, 좋아요 버튼, 댓글 작성/목록, 폼 입력 폼	게시글 작성 페이지(/articles/create), 마이페이지
호출 방식	<livewire:articles.list />	<livewire:pages::articles.list />

Livewire 컴포넌트를 생성하는 위의 두 명령어의 차이는 이 표를 참고하자.

resources/views/pages/articles/⚡list.blade.php

<?php

use Livewire\Component;

new class extends Component
{
    //
};
?>

<div>
    {{-- Nothing worth having comes easy. - Theodore Roosevelt --}}
</div>

위의 명령어로 resources/views/pages/articles/ 디렉터리에 이렇게 하나의 파일에 프론트엔드와 백엔드 로직이 함께 들어가는 Livewire 컴포넌트 파일이 만들어졌다.

Livewire 컴포넌트 파일을 생성하면 이렇게 유명한 위인의 명언들이 랜덤으로 주석 처리되어 있는데, 이걸 보는 재미도 쏠쏠하다.

프론트엔드와 백엔드의 파일을 나누는 옵션들

혹시 프론트엔드와 백엔드의 파일을 나누고 싶다면, 명령어에 --mfc 옵션을 넣으면 된다.

이 경우에는 resources/views/pages/articles/ 디렉터리 안에 2개의 파일이 생성된다.

--class 옵션을 넣어서 프론트엔드와 백엔드의 파일을 나누는 방법도 있다.

이 경우에는 Livewire 버전 3와 똑같이 app/ 디렉터리와 resources/views/ 디렉터리에 각각 파일이 생성된다.

어떤 옵션을 선택하느냐에 따라 코드의 작성 방식도 달라지는데, 새로운 버전인 4에 적응하고 싶다면 아무 옵션도 넣지 않거나 --mfc 옵션을 쓰도록 하자.

마지막으로 유튜브에서 관련 영상을 하나 가져와봤다.

다음 포스트

라라벨 Livewire 4 컴포넌트의 web.php 라우팅 설정

라라벨 Livewire 버전 4에서 web.php에 컴포넌트를 라우팅 하고 web 웹사이트 내비게이션 메뉴에 연결하는 방법을 정리합니다. pages:: 식별자를 통한 컴포넌트 자동 연결 구조와 PC 및 모바일 반응형 내비게이션 링크 추가 방법까지 정리했습니다.