티스토리 뷰

개발지식/Laravel

Laravel 컴포넌트 참조

kimty1121 2023. 10. 29. 23:11

강의 학습중 익숙해지지 않으면 기억나지 않을거 같아 메모를 해야할것 같다.

이 포스트만 보고 이해하기가 어려울 것이다.

 

뷰에서 컴포넌트를 참조하는 경우

먼저 테스트를 위해 blade 파일을 만든다.

component-test1.blade.php

// resources/views/tests/component-test1.blade.php
<x-tests.app>
    <x-slot name="header">header1</x-slot>
    component test1
    <x-tests.card title="タイトル1" content="本文" :message="$message"/>
    <x-tests.card title="タイトル2"/>
    <x-tests.card title="タイトルを変更したい" class="bg-red-300"/>
</x-tests.app>

컴포넌트 파일을 참조할 때는 x-파일명 식으로 작성한다. 

resources/views/components/tests/app.blade.php 를 참조할경우 <x-tests.app>

resources/views/components/tests/card.blade.php 를 참조할 경우 <x-tests.card>

 

resources/views/components/tests/app.blade.php 파일

더보기 
// resources/views/components/tests/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Scripts -->
        {{-- @vite(['resources/css/app.css', 'resources/js/app.js']) --}}

        <!-- Style -->
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
        <!-- Script -->
        <script src="{{ asset('js/app.js') }}" defer></script>
    </head>
    <body>
        <header>
            {{ $header }}
        </header>
        <div class="font-sans text-gray-900 antialiased">
            {{ $slot }}
        </div>
    </body>
</html>

resources/views/components/tests/card.blade.php 파일

더보기 
// resources/views/components/tests/card.blade.php
@props([
    'title',
    'message' => '初期値です。',
    'content' => '本文初期値です。'
])

<div {{ $attributes->merge([
    'class' => 'border-2 shadow-md w-1/4 p-2'
    ]) }}>
    <div>{{ $title }}</div>
    <div>画像</div>
    <div>{{ $content }}</div>
    <div>{{ $message }}</div>
</div>

결과물

클래스에서 컴포는트를 참조할 경우

테스트를 위해 blade 파일을 만든다.

component-test2.blade.php

// resources/views/tests/component-test2.blade.php
<x-tests.app>
    <x-slot name="header">header2</x-slot>
    component test2
    <x-test-class-base />
</x-tests.app>

 

클래스에서 컴포는트를 참조할 경우

<x-test-class-base /> 같이 해당 클래스 app/View/Components/TestClassBase.php 의 이름을 작성한다.

 

test-class-base-component.blade.php

더보기 
// resources/views/components/tests/test-class-base-component.blade.php
<div>
    クラスベースのコンポーネントです
    <!-- An unexamined life is not worth living. - Socrates -->
</div>

 

app/View/Components/TestClassBase.php

명령어로 작성: php artisan make:component TestClassBase

더보기 
// app/View/Components/TestClassBase.php
<?php

namespace App\View\Components;
use Illuminate\View\Component;

class TestClassBase 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.tests.test-class-base-component');
    }
}

 

결과물

테스트를 위한 경로지정

컨트롤러에서 함수를 작성하여 테스트 파일을 반환한다.

하위 경로지정에 / 대신에 . 을 사용한다.

// app/Http/Controllers/ComponentTestController.php

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;

class ComponentTestController extends Controller
{
    public function showComponent1(){
        $message = 'メッセージ';
        return view('tests.component-test1', compact('message'));
    }

    public function showComponent2(){
        return view('tests.component-test2');
    }
}

URL 접근을 위한 루트 지정

// routes/web.php

Route::get('/component-test1', [ComponentTestController::class, 'showComponent1']);
Route::get('/component-test2', [ComponentTestController::class, 'showComponent2']);

 

'개발지식 > Laravel' 카테고리의 다른 글

Laravel 서비스 컨테이너 등록  (0) 2023.12.24
Laravel artisan 명령어 정리  (0) 2023.11.14
Laravel 인증 라이브러리 비교  (0) 2023.10.21
Laravel 프론트에 관해서 (Vite)  (0) 2023.10.21
Laravel 설정  (0) 2023.10.21