PHP/Laravel(4) 컴포넌트&슬롯

https://laravel.kr/docs/6.x/blade

라라벨 6.x - 블레이드 템플릿

라라벨코리아 코리아 블레이드 템플릿 쪽을 읽다 보니 컴포넌트와 슬롯이라는 것이 있어서

이것도 공부해볼까 합니다.

 

라라벨 코리아 설명을 보니 제대로 이해가 가지 않아 따로 찾아봤습니다.

https://dev.to/munchvue/building-components-in-the-beautiful-laravel-2b0g

Building Components in the Beautiful Laravel

이 사이트를 참고했습니다.

 

먼저 views 폴더 안에 layouts 폴더를 만들어줍시다.

그리고 layouts 폴더 안에 alert.blade.php 파일을 만들어줍시다.

 

그리고 alert.blade.php 파일 안에 

<div class="alert alert-danger">
    {{$slot}}
</div>

이렇게 입력해줍니다.

 

그리고 index.blade.php 파일안에

@extends('layouts.master')
@component('layouts.alert')
    <strong>Whoops!</strong> Something went wrong!
@endcomponent

이렇게 입력해줍니다.

 

첫 줄 @extends는 제가 배경색을 주려고 따로 한 것입니다.

@extends와 @components 둘 다 layouts. 이렇게 앞에 들어가는데

layouts 폴더 안에 있는 master, alert 파일을 고르는 것입니다.

 

제대로 출력되는 것을 확인할 수 있습니다.

 

 

이번에는 @slot 지시어를 사용해봅시다.

 

alert.blade.php 파일은 수정하지 않고

index.blade.php 파일만 수정해줍시다.

<div class="alert alert-danger">
    {{$slot}}
</div>

 

@extends('layouts.master')
@component('layouts.alert')
    @slot('slot')
        Whoops! Something went Wrong
    @endslot
@endcomponent

@slot() 안에는 alert.blade.php에서 사용한 $slot을 넣어서 'slot'으로 표현합니다.

 

 

추가적인 데이터를 컴포넌트로 보내는 방법입니다.

index.blade.php를 수정해줍시다.

@extends('layouts.master')
@component('layouts.alert',['foo' => 'Hello'])
   
@endcomponent

 

다음으로 alert.blade.php입니다.

<div class="alert alert-danger">
    {{$foo}}
</div>

제대로 Hello가 출력됩니다.

 

 

 

마지막으로 별칭 컴포넌트입니다.

app >> Providers >> AppServiceProvider.php 파일을 열어줍시다.

 

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;


class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //
    }
}

 

 

그러면 이렇게 코딩이 돼있습니다.

use Illuminate\Support\ServiceProvider;

바로 아래 코드를 추가해줍시다.

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Blade;
Blade::component('layouts.alert', 'alert');

여기서 주의하실 점은 layouts 부분에는 alert.blade.php 파일이 들어가 있는 폴더의 이름으로 해주셔야 합니다.

2번째 인자는 @component('layouts.alert')의 이름을 alert으로 사용하는 것입니다.

 

alert.blade.php에 다음과 같이 입력해 줍시다.

<div class="alert alert-danger">
    <div class="alert-title">Error</div>
    {{$slot}}
</div>

그리고 index.blade.php입니다.

@extends('layouts.master')
@alert
    You are not allowed to access this resource!
@endalert

 

 

결과화면

제대로 작동하는 것을 확인할 수 있습니다.

 

컴포넌트에 추가 슬롯이 있는 경우에는

index.blade.php에

@extends('layouts.master')
@alert(['type' => 'danger'])
    You are not allowed to access this resource!
@endalert

이렇게 입력을 해주고

 

alert.blade.php에

<div class="alert alert-danger">
    <div class="alert-title">Error</div>
    {{$slot}}
    {{$type}}
</div>

이렇게 입력을 해줍니다.

 

그럼 결과 화면은

이렇게 danger가 출력되는 것을 확인할 수 있습니다.

 

이것으로 컴포넌트 & 슬롯 마치겠습니다.

 

 

 

 

제가 이해를 잘 못하는지 라라벨 코리아 가이드만 보고 따라 하기에는 힘이 드네요...