Laravel Component

클래스 기반의 컴포넌트와 익명 컴포넌트 2가지가 있다.

기본컨셉

 1Blade 페이지에서 여러개의 블록을 만들고 그 블록을 랜더링 시킬 수 있는 함수라고 생각하자.
 2 
 3함수는 매개변수와 return 값이 존재한다.
 4 
 5매개변수는 어떻게 정의할까?
 6return 는 항상 HTML 이다.
 7 
 8 
 91. 함수를 부르는 방법 (컴포넌트 불러쓰는 방법 <x-)
10<x-alert></x-alert>
11 
122. 매개변수 적용방법 (태그의 속성으로 적용한다.)
13<x-alert name="alert"></x-alert>
14 
153. 매개변수 처리방법 (class 방식에서)
16class Alert extends Component
17{
18    public $name;
19 
20    // 생성자에서
21    public function __constructor($name)
22    {
23        $this->name = $name;
24    }
25}
26 
274. return 하기
28// alert.blade.php 페이지에서 리턴함.
29<div>{{ $name }}</div>
30 
31 
325. 익명 컴포넌트에서는 어떻게 매개변수를 처리하고 반환할까?
33<x-notice name="공지사항" message="알려 드립니다.!!"></x-notice>
34 
35// notice.blade.php
36@props (['name'=>'', 'message' => '공지사항']) // 기본값은 '공지사항'
37 
38// $name 설정하지 않으면?
39// class 기반의 컴포넌트에서 속성을 모두 설정하지 않아도 @props 로 설정하면 자동으로 속성이 설정된다.
40// 익명에서 설정하지 않으면? 에러가 발생한다.
41// @props 를 사용하면 사용하는 모든 변수를 설정해야 한다. 그렇지 않으면 에러가 발생한다.
42// @props 를 사용하지 않아도 상관없지만, 기본적으로 항상 사용한다고 생각하자.
43 
44<div>{{ $name }}</div>
45<div>{{ $message }}</div>
46 
476. 매개변수 이외의 내용을 추가로 전달할 수 있다. 여러개의 내용을 구분해서 전달가능하다.
48<x-notice name="공지사항" message="알려 드립니다.!!">
49 
50    <x-slot:title>
51        다음의 내용을 알려드립니다.
52    </x-slot:title>
53 
54    내용 : 공지사항 입니다. ...이러쿵 저렇쿵
55 
56</x-notice>
57 
58 
59// notice.blade.php
60 
61@props ([
62'name' => '',
63'message' => '',
64'type'=> 'text'
65])
66 
67<div>
68 
69    <hr>
70    <div>{{ $name }}</div>
71    <div>{{ $message }}</div>
72    <div>{{ $type }}</div>
73 
74    @if(isset($title))
75    <h1>{{ $title }}</h1>
76    @endif
77 
78    <h4>
79        {{ $slot }}
80    </h4>
81 
82 
83</div>

명령어 (컴포넌트 생성하기)

 1php artisan make:component 컴포넌트명
 2 
 3php artisan make:component WelcomeItem
 4 
 5// 클래스만 생성됨.
 6php artisan make:component WelcomeItem --inline
 7 
 8// blade 파일만 생성됨.
 9php artisan make:component WelcomeItem --view
10 
11<x-welcome-item></x-welcome-item>

Blade 페이지에서 컴포넌트 적용시 데이타 전달 방법은?

HTML tag 의 속성을 이용해서 전달할 수 있다.

:message 는 PHP 변수나 표현식을 전달할때 사용된다. 동적인 데이타

1<x-alert type="error" :message="$message" />

php 변수를 적용하는 다양한 방법

 1// test.blade.php
 2 
 3@php
 4$message="메시지 입니다.";
 5@endphp
 6 
 7<x-alert name="alert" message="{{ $message }}"></x-alert>
 8 
 9// 또는
10 
11<x-alert name="alert" :message="$message"></x-alert>
12 
13// 또는
14<x-alert name="alert" :$message></x-alert>
15 
16:message 를 무시하는 방법은 ::message 이다..더블콜론으로 처리하기

클래스 기반의 컴포넌트에서 생성자를 통해서 데이타 받기

 1class Alert extends Component
 2{
 3 
 4    public function __contruct(public ?string $type = null, public ?string $message = null) {}
 5    // $type, $message 는 자동으로 변수가 설정된다.
 6 
 7    public function render(): View
 8    {
 9        return view('components.alert');
10    }
11 
12}

View 에서 변수 보여주기

1/components/alert.blade.php
2 
3<div class="alert alert-{{ $type }}">
4{{ $message }}
5</div>

익명 컴포넌트에서 데이타 전달 방법은?

1@props(['type' => 'alert', 'message']);

Component Attributes

컴포넌트를 html 태그처럼 사용할때..컴포넌트에 속성을 전달하는 방법을 제시해줌.

 1$attributes 미리 정의된 변수. 컴포넌트 속성 지정시..모든 속성 표시해 주기.
 2 
 3$attributes->merge();
 4$attributes->class();
 5$attributes->class()->merge();
 6 
 7$attributes->prepends();
 8$attributes->filter();
 9$attributes->whereStartWith();
10$attributes->whereDoesntStartWith();
11$attributes->whereStartsWith()->first();
12$attributes->has();
13$attributes->get();
14 
15 
16배열로 입력한다.
17$attributes->merge(['class'=>'text-sm bg-indigo-500', 'type'=>'button']);
18 
19Css class에 선택적으로 입력하기
20$attributes->class(['bg-red'=>$hasError]);

컴포넌트 변수 또는 메소드 읽어들이기

$component 키워드를 사용한다.

 1<x-alert>
 2    <x-slot:title>
 3    {{ $component->formatAlert('Server Error') }}
 4    </x-slot>
 5 
 6    Something went wrong!
 7</x-alert>
 8 
 9 
10class Alert extends Component
11{
12    public $name;
13 
14    public function __construtor($name)
15    {
16        $this->name = $name;
17    }
18 
19    public function FormatAlert($str)
20    {
21        return $str;
22    }
23 
24}

예제. 2