Blade용 Component 만들기

blade용 component 는 자주 사용하는 template을 component로 만들어 사용하는 방식입니다.
이것과 대처할 수 있는 것이 @include 를 사용하는 방식인데 @include 는 controller를 이용할 수 없고 직접 PHP를 사용하여 구성하여야 함으로 조금 더 번잡할 수 있습니다.
include를 사용하여 페이징처리 하기 참조(하단 수동처리)

Component 만들기

먼저 명령어를 이용하여 Alert 이라는 component를 만들겠습니다.

php artisan make:component Alert

명령을 실행하면 /app/View/Components/Alert.php 파일 및 /resources/views/components/alert.blade.php 파일이 아래와 같이 생성됩니다.

/app/View/Components/Alert.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
  /**
    * Create a new component instance.
    *
    * @return void
    */
  public function __construct()
  {
    //
  }

  /**
    * Get the view / contents that represent the component.
    *
    * @return \Illuminate\Contracts\View\View|\Closure|string
    */
  public function render()
  {
    return view('components.alert');
  }
}

/resources/views/components/alert.blade.php

<div>
    <!-- Waste no more time arguing what a good man should be, be one. - Marcus Aurelius -->
</div>

실제 이것을 blade에 노출하는 방식은 간단한다. 아래 처럼 삽입하면 끝

• sample-view.blade.php

<x-alert/>

응용예제

위에서 세팅된 내용을 가지고 약간의 수정을 거치겠습니다. 참조로 Laravel ver은 8.xx 입니다. /app/View/Components/Alert.php

<?php
namespace App\View\Components;
use Illuminate\View\Component;

class Alert extends Component
{
   public $type;
   public $message;
   public $var;

    public function __construct($type, $message, $var=null)
    {
      $this->type = $type;
      $this->message = $message;
      $this->var = $var;
    }

    public function render()
    {
      return view('components.alert');
    }
}

/resources/views/components/alert.blade.php

<div class="c-alert c-alert--{{ $type }}" role="alert">
   <p class="c-alert__message">{{ $message }}</p>
   <p class="c-alert__var">{{ $var }}</p>
</div>

실제 이것을 blade에 노출하는 방식은 간단한다. 아래 처럼 삽입하면 끝

sample-view.blade.php

• 변수를 전달할 경우 ":" 를 사용
• 전달값 키의 이름으로 '_' 같은 것은 피해야한다(변수값을 제대로 가지고 오지 못함 )

@php
  $var = 'my var';
@endphp
<x-alert type="info" message="Please try again." :var="$var" />

View 없이 컴포넌트 만들기

위에서는 App\View\Components 에 클래스를 만들어 처리하는 방법을 사용하였으나 단순하게 변수를 받아서 출력하는 것은 별도의 Components를 만들지 않고 바로 처리 가능합니다.
이때는 views > components 아래에 바로 파일만 생성하여서도 호출이 가능합니다.

• views.components.message.blade.php

@props(['message'])
Your message is {{$message}}

• view

<x-message message="welcome to story"></x-component>