[Laravel] 컴포넌트 총정리

 1. 개요

리액트에서 나오는 컴포넌트와 같은 개념입니다.

기존에 라라벨에 있던 레이아웃과 같이 컴포넌트는 템플릿에서 템플릿을 불러오는 방법이고 슬롯은 레이아웃의 세션과 같이 컴포넌트에게 값을 넘기는 방법입니다.

컴포넌트의 정의는 아래의 네이버 지식인이 말해주는 그대로 모듈이이고, 슬롯은 그 모듈에 넘기는 일종의 파라미터로 보시면됩니다

2. 라라벨6

라라벨 6 버전까지는 컴포넌트를 아래 방식으로 사용합니다.
컴포넌트 파일을 아래와 같은 방법으로 선언합니다, 이때 다음에서 템플릿에서 넘긴 $슬롯명과 $slot을 사용할 수 있습니다.

<div>
    {{ 슬롯명 }}
    {{ $slot }}
</div>

생성한 컴포넌트를 사용할 블레이드 파일에서는 아래와 같이 선업합니다.

@component('폴더명.파일명(경로)')
	@slot('슬롯명')
    	슬롯값
	@endslot
	기본 값!
@endcomponent

위에서 @slot() @endslot 안에 들어간 값은 @slot() 괄호안에
적은 슬롯 명으로 컴포넌트 파일에서 변수로 사용이 가능합니다.

@slot 지시어 안에 들어가지 않는 값들은 전부 $slot 변수로 받아집니다.

또한 라라벨6까지는 컴포넌트의 명칭(alias)을 정해줄 수 있습니다.
AppServiceProvider@boot에 Blade::component('파일위치','별명');을 추가하면
@component가 아닌 선언한 '@별명'으로 사용이 가능합니다.

 

 ※ 라라벨 8버전도 위와 같은 형태로 컴포넌트 사용은 가능하나 AppServiceProvider에다가 별명을 등록하는 건 안됩니다. ※

3. 라라벨6의 예시 

기존의 코드는 아래와 같습니다.

이를 welcome_item.blade.php 파일을 만들어서 아래와 같은 형식으로 바꿔줍니다.

<div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-l">
    <div class="flex items-center">
        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500">
            <path d="{{ $svg_path }}"></path></svg>
        <div class="ml-4 text-lg leading-7 font-semibold text-gray-900 dark:text-white">{{ $title }}</div>
    </div>

    <div class="ml-12">
        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
            {{ $content }}
        </div>
    </div>
</div>

 기존 코드를 아래와 같이 컴포넌트로 교체합니다.

이와 같은 방법으로 나머지 3개도 수정이 가능합니다.

4. 라라벨7 부터의 컴포넌트

4-1. 클래스 기반 컴포넌트

클래스 기반 컴포넌트는 아래와 같은 명령어로 선언합니다.

php artisan make:component 컴포넌트 명

이러면 resources/views/components/컴포넌트명.blade 파일, 뷰 파일과
app/View/Components/컴포넌트명.php 파일, 클래스파일이 생깁니다.

이때 다음과 같이 컴포넌트 명은 단어의 첫 글자가 대문자로 파스칼 케이스를 사용합니다.

php artisan make:component WelcomeItem

아래와 같이 선언하면 partials 디렉터리 안에 test 컴포넌트를 만들 수 있습니다.

php artisan make:component partials.test

컴포넌트의 사용법은 블레이드 파일에서 <x-컴포넌트명></x-컴포넌트명> 입니다.

<x-welcome-item></x-welcome-item>

만약 components의 welcome-item.blade 파일을 partials 폴더에 넣었다면 아래 방식으로 불러옵니다.

<x-partials.welcome-item></x-partials.welcome-item>

컴포넌트에 데이터를 넘기는 방식은 

1. 정적인 값을 담는

슬롯명="값"과

2. 동적인 변수를 담는

:슬롯명="$변수명"가 있습니다

3. 컴포넌트 태그아네 값을 담는

<x-컴포넌트>값</x-컴포넌트>가 있습니다.

 

welcome.blade.php (Usage)

<x-welcome-item type="notice" :message="$message" key1="value1" key2="value2">
	slot value!
</x-welcome-item>

welcome-item.blade.php (Component View)

$attributes는 사용되지 않은 나머지 슬롯을 출력합니다.

그리고 위 welcome.blade에서 key1와 key2는 슬롯으로 넘겼지만

아래의 컴포넌트 클래스인 WelcomeItem.php에서는 $key1,$key2를 변수 선언 안 했기에 (클래스 파일에서 로컬 변수로 선언해야 합니다.) $attributes를 통한 사용이 않일 시 에러가 발생합니다. 

<div class="asb-{{$type}}">
    type : {{$type}} <br/>
    message : {{$message}} <br/>
    slot : {{$slot}} <br/>
    attributes : {{$attributes}} <br/>
</div>

WelcomeItem.php (Component Class)

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class WelcomeItem extends Component
{
    public $type;
    public $message;

    public function __construct($type, $message)
    {
        $this->type = $type."1234";
        $this->message = $message."1234";
    }

    public function render()
    {
        return view('components.welcome-item');
    }
}

결과물 (Result)

type : notice1234
message : hello world!21234
slot : slot value!
attributes : key1="value1" key2="value2"

4-2. 익명 컴포넌트

익명 컴포넌트는 클래스 기반과 달리 클래스가 존재하지 않는 컴포넌트입니다.
즉 단일 태그 뷰 파일만이 존재하며 클래스 파일은 없습니다.

연결된 클래스가 없기 때문에 @props 지시어를 통해야 초기값 설정 및 변수 선언을 할 수 있습니다.

@props(['변수명' => '기본값', '변수명'])

아래와 같이 사용합니다.

@props(['type' => 'info', 'message'])
<div>
    type : {{$type}} <br/>
    message : {{$message}} <br/>
    slot : {{$slot}} <br/>
    attributes : {{$attributes}} <br/>
</div>

4-3. 인라인 뷰 컴포넌트

기존의 방식으로 하면은 무조건 2개의 파일이 생성되기에 비교적 간단한 컴포넌트에 경우에는 두 개가 아닌 하나의 파일로 처리하는 컴포넌트입니다.

 php artisan make:component 컴포넌트명 --inline

다음과 같이 기존과 비슷한 방법으로 슬롯을 사용할 수 있습니다.

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class InlineAlert extends Component
{
    public $type;

    public function __construct($type)
    {
        $this->type = $type;
    }

    public function render()
    {
        return <<<'blade'
            <div>
                {{ $type }}
                {{ $slot }}
            </div>
        blade;
    }
}

4-4. 동적 컴포넌트

데이터가 렌더링 될 시간이 필요할 때 아래와 같이 dynamic-component를 이용해 기다릴 수 있습니다.

<x-dynamic-component :component="$componentName"/>