라라벨 Blade 컴포넌트 생성 (select와 textarea 컴포넌트)

이번 포스트에서는 Livewire 컴포넌트가 아닌, Blade 컴포넌트를 만들어보려고 한다.

임시로 만들었던 <select>와 <textarea>에는 다크 모드를 위한 스타일 적용이 안되어 있었다.

그리고 <select>와 <textarea>가 사용되는 곳이 현재는 한 곳뿐이지만, 웹사이트가 커진다면 여러 곳에서 사용될 가능성이 충분히 있기 때문에 다크 모드도 적용할 겸 컴포넌트로 만들어보겠다.

이전 포스트

라라벨 Livewire로 새 글 작성 시 유효성 검사 기능 구현

라라벨 Livewire의 #[Validate] 어트리뷰트를 활용해 새 글 작성 폼의 유효성 검사 기능을 구현합니다. 검증된 데이터만 필터링하여 DB에 안전하게 저장하는 방법과 코드 간결성, 보안성, 유지보수성을 모두 높이는 팁을 다룹니다.

select와 textarea 컴포넌트 생성 · 4th-avenue/laravel13-livewire@43281c9 · GitHub

설명 없음

github.com

전체적인 코드 수정은 이 깃허브 링크를 통해서 확인할 수 있다.

Blade 컴포넌트 생성 (textarea 컴포넌트)

@props(['disabled' => false])

<textarea {{ $disabled ? 'disabled' : '' }} {{ $attributes->merge(['class' => 'border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm resize-none']) }}>
</textarea>

resources/views/components 디렉터리에 textarea.blade.php 파일을 수동으로 만들고 위의 코드를 넣고 저장하자.

코드에 대한 설명은 아래와 같다.

@props(['disabled' => false])

이 코드는 컴포넌트에 전달되는 속성을 정의하는 것이다.

@props는 Laravel Blade 컴포넌트에서 사용되며, 컴포넌트에 기본값을 제공하거나 여러 속성을 설정할 수 있다.

['disabled' => false]는 컴포넌트에 disabled라는 속성이 전달되었을 때 그 값을 사용하고, 전달되지 않으면 기본값으로 false를 설정하는 의미다.

즉, 이 컴포넌트는 사용자가 컴포넌트에 disabled 속성을 넘기지 않으면 기본적으로 활성화되어 있지만, disabled="true"로 전달되면 textarea가 비활성화된다.

이 textarea 컴포넌트를 댓글에 사용했을 때, 로그인을 한 사용자에게는 textarea를 활성화하고, 비로그인 사용자에게는 textarea를 비활성화할 때 사용하면 될 것 같다.

<textarea {{ $disabled ? 'disabled' : '' }} {{ $attributes->merge(['class' => ' ... ']) }}>
</textarea>

이 코드는 Blade의 조건부 렌더링과 HTML 속성 병합을 통해 textarea의 속성과 CSS 클래스를 설정한다.

• {{ $disabled ? 'disabled' : '' }}: Blade 템플릿에서 조건부 렌더링을 위해 사용된다. $disabled 값이 true일 경우 disabled 속성을 추가하고, 그렇지 않으면 빈 문자열을 반환한다. 이로 인해, $disabled 값이 true면 textarea가 비활성화되고, false일 경우 기본적으로 활성화된다.
• {{ $attributes->merge(['class' => ' ... resize-none']) }}: 이 부분은 Laravel에서 제공하는 Blade의 속성 병합 기능을 사용한다. 이를 통해 컴포넌트가 호출될 때 전달된 HTML 속성들과 기본 설정된 속성들을 병합할 수 있다. $attributes->merge()는 다른 속성들과 현재 속성(class)을 병합하는 메서드다.

Blade 컴포넌트 생성 (select 컴포넌트)

@props(['disabled' => false])

<select {{ $disabled ? 'disabled' : '' }} {{ $attributes->merge(['class' => 'border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm']) }}>
    {{ $slot }}
</select>

마찬가지로 resources/views/components 디렉터리에 select.blade.php 파일을 수동으로 만들었다.

위에서 설명한 textarea.blade.php 파일과 대체적으로 비슷하지만, 여기에는 {{ $slot }}이라는 게 있다.

{{ $slot }}은 라라벨 Blade 컴포넌트에서 부모 페이지가 컴포넌트 태그 사이에 집어넣은 하위 HTML 콘텐츠(자식 요소)가 출력되는 위치를 지정하는 변수다.

HTML의 <select> 태그는 내부에 <option> 태그들이 들어갈 자리가 필요한데, 바로 그 <option> 태그들을 받아와 렌더링하는 통로 역할을 한다.

글 작성 페이지에 Blade 컴포넌트 호출하기

<x-select wire:model="category_id" id="category_id" class="block mt-1 w-full" name="category_id" required>
    <!-- 생략 -->
</x-select>

<x-textarea wire:model="body" id="body" rows="9" class="block mt-1 w-full" name="body" required autocomplete="off"></x-textarea>

기존의 <select>와 <textarea> 태그가 있던 곳을 이렇게 Blade 컴포넌트를 호출하는 코드로 수정했다.

컴포넌트에는 다크 모드를 위한 스타일을 적용해두었기 때문에, 이전의 다크 모드에서 셀렉트와 본문 작성 필드만 하얗게 표시되는 문제가 해결되었다.

다음 포스트

글 목록 표시하기 (Lazy Loading N+1 문제 원천 차단)

라라벨 Livewire 환경에서 DB 글 목록을 최신순으로 표시하고, 개발 단계에서 N+1 문제를 원천 차단하는 방법을 설명합니다. Eager Loading 최적화와 게시글 저장 후 SPA 방식의 리다이렉트 구현까지 한번에 알아봅니다.