Skip to content

소개

물론, 라우트와 컨트롤러에서 전체 HTML 문서 문자열을 직접 반환하는 것은 실용적이지 않습니다. 다행히도, 뷰는 모든 HTML을 별도의 파일에 배치하는 편리한 방법을 제공합니다.

뷰는 컨트롤러/애플리케이션 로직을 프레젠테이션 로직과 분리하며 resources/views 디렉토리에 저장됩니다. Laravel을 사용할 때, 뷰 템플릿은 일반적으로 Blade 템플릿 언어를 사용하여 작성됩니다. 간단한 뷰는 다음과 같을 수 있습니다.

<!-- View stored in resources/views/greeting.blade.php -->
 
<html>
<body>
<h1>Hello, {{ $name }}</h1>
</body>
</html>

이 뷰가 resources/views/greeting.blade.php에 저장되어 있으므로 다음과 같이 전역 view 헬퍼를 사용하여 반환할 수 있습니다.

Route::get('/', function () {
return view('greeting', ['name' => 'James']);
});
lightbulb

Blade 템플릿 작성 방법에 대한 더 많은 정보를 찾고 계십니까? 시작하려면 전체 Blade 문서를 확인하십시오.

React / Vue에서 뷰 작성하기

많은 개발자들이 Blade를 통해 PHP로 프런트엔드 템플릿을 작성하는 대신 React나 Vue를 사용하여 템플릿을 작성하는 것을 선호하기 시작했습니다. Laravel은 SPA를 빌드할 때 일반적으로 발생하는 복잡성 없이 React/Vue 프런트엔드를 Laravel 백엔드에 쉽게 연결할 수 있게 해주는 라이브러리인 Inertia 덕분에 이러한 작업을 간편하게 수행할 수 있습니다.

저희의 Breeze 및 Jetstream 스타터 키트는 Inertia로 구동되는 다음 Laravel 애플리케이션을 위한 훌륭한 출발점을 제공합니다. 또한, Laravel Bootcamp은 Vue 및 React 예시를 포함하여 Inertia로 구동되는 Laravel 애플리케이션 구축에 대한 완전한 데모를 제공합니다.

뷰 생성 및 렌더링

.blade.php 확장자를 가진 파일을 애플리케이션의 resources/views 디렉토리에 배치하거나 make:view Artisan 명령어를 사용하여 뷰를 생성할 수 있습니다.

php artisan make:view greeting

.blade.php 확장자는 해당 파일이 블레이드 템플릿을 포함하고 있음을 프레임워크에 알립니다. 블레이드 템플릿은 HTML뿐만 아니라 값을 쉽게 출력하고, "if" 문을 만들고, 데이터를 반복하는 등의 작업을 할 수 있는 블레이드 지시어를 포함합니다.

뷰를 생성한 후, 전역 view 헬퍼를 사용하여 애플리케이션의 라우트 또는 컨트롤러에서 반환할 수 있습니다.

Route::get('/', function () {
return view('greeting', ['name' => 'James']);
});

뷰는 View 파사드를 사용하여 반환할 수도 있습니다.

use Illuminate\Support\Facades\View;
 
return View::make('greeting', ['name' => 'James']);

보시다시피 view 헬퍼에 전달되는 첫 번째 인수는 resources/views 디렉토리의 뷰 파일 이름에 해당합니다. 두 번째 인수는 뷰에서 사용할 수 있어야 하는 데이터 배열입니다. 이 경우, 블레이드 구문을 사용하여 뷰에 표시되는 name 변수를 전달하고 있습니다.

중첩된 뷰 디렉토리

뷰는 resources/views 디렉토리의 하위 디렉토리 내에 중첩될 수도 있습니다. "점" 표기법을 사용하여 중첩된 뷰를 참조할 수 있습니다. 예를 들어, 뷰가 resources/views/admin/profile.blade.php에 저장되어 있는 경우, 다음과 같이 애플리케이션의 라우트/컨트롤러에서 반환할 수 있습니다.

return view('admin.profile', $data);
exclamation

뷰 디렉토리 이름에는 . 문자가 포함되어서는 안 됩니다.

사용 가능한 첫 번째 뷰 생성

View 파사드의 first 메서드를 사용하여 주어진 뷰 배열에서 존재하는 첫 번째 뷰를 만들 수 있습니다. 이는 애플리케이션 또는 패키지에서 뷰를 사용자 정의하거나 덮어쓰도록 허용하는 경우에 유용할 수 있습니다.

use Illuminate\Support\Facades\View;
 
return View::first(['custom.admin', 'admin'], $data);

뷰 존재 여부 확인

뷰가 존재하는지 확인해야 하는 경우 View 파사드를 사용할 수 있습니다. exists 메서드는 뷰가 존재하면 true를 반환합니다.

use Illuminate\Support\Facades\View;
 
if (View::exists('admin.profile')) {
// ...
}

뷰에 데이터 전달

이전 예에서 보았듯이, 뷰에서 해당 데이터를 사용할 수 있도록 뷰에 데이터 배열을 전달할 수 있습니다.

return view('greetings', ['name' => 'Victoria']);

이러한 방식으로 정보를 전달할 때 데이터는 키/값 쌍의 배열이어야 합니다. 뷰에 데이터를 제공한 후에는 <?php echo $name; ?>와 같이 데이터의 키를 사용하여 뷰 내에서 각 값에 접근할 수 있습니다.

view 헬퍼 함수에 전체 데이터 배열을 전달하는 대신 with 메서드를 사용하여 개별 데이터를 뷰에 추가할 수도 있습니다. with 메서드는 뷰 객체의 인스턴스를 반환하므로 뷰를 반환하기 전에 메서드 체인을 계속할 수 있습니다.

return view('greeting')
->with('name', 'Victoria')
->with('occupation', 'Astronaut');

모든 뷰와 데이터 공유

애플리케이션에서 렌더링되는 모든 뷰와 데이터를 공유해야 할 때가 있습니다. View 파사드의 share 메서드를 사용하여 이를 수행할 수 있습니다. 일반적으로 share 메서드에 대한 호출은 서비스 제공자의 boot 메서드 내에 배치해야 합니다. App\Providers\AppServiceProvider 클래스에 추가하거나 별도의 서비스 제공자를 생성하여 보관할 수 있습니다.

<?php
 
namespace App\Providers;
 
use Illuminate\Support\Facades\View;
 
class AppServiceProvider extends ServiceProvider
{
/**
* 모든 애플리케이션 서비스를 등록합니다.
*/
public function register(): void
{
// ...
}
 
/**
* 모든 애플리케이션 서비스를 부트스트랩합니다.
*/
public function boot(): void
{
View::share('key', 'value');
}
}

뷰 컴포저

뷰 컴포저는 뷰가 렌더링될 때 호출되는 콜백 또는 클래스 메서드입니다. 뷰가 렌더링될 때마다 뷰에 바인딩하려는 데이터가 있는 경우 뷰 컴포저를 사용하면 해당 로직을 단일 위치로 정리하는 데 도움이 될 수 있습니다. 뷰 컴포저는 애플리케이션 내에서 여러 라우트 또는 컨트롤러에서 동일한 뷰가 반환되고 항상 특정 데이터가 필요한 경우 특히 유용할 수 있습니다.

일반적으로 뷰 컴포저는 애플리케이션의 서비스 제공자 중 하나 내에 등록됩니다. 이 예에서는 App\Providers\AppServiceProvider가 이 로직을 보관한다고 가정합니다.

View 파사드의 composer 메서드를 사용하여 뷰 컴포저를 등록합니다. 라라벨은 클래스 기반 뷰 컴포저에 대한 기본 디렉토리를 포함하지 않으므로 원하는 방식으로 구성할 수 있습니다. 예를 들어, app/View/Composers 디렉토리를 만들어 애플리케이션의 모든 뷰 컴포저를 보관할 수 있습니다.

<?php
 
namespace App\Providers;
 
use App\View\Composers\ProfileComposer;
use Illuminate\Support\Facades;
use Illuminate\Support\ServiceProvider;
use Illuminate\View\View;
 
class AppServiceProvider extends ServiceProvider
{
/**
* 모든 애플리케이션 서비스를 등록합니다.
*/
public function register(): void
{
// ...
}
 
/**
* 모든 애플리케이션 서비스를 부트스트랩합니다.
*/
public function boot(): void
{
// 클래스 기반 컴포저 사용...
Facades\View::composer('profile', ProfileComposer::class);
 
// 클로저 기반 컴포저 사용...
Facades\View::composer('welcome', function (View $view) {
// ...
});
 
Facades\View::composer('dashboard', function (View $view) {
// ...
});
}
}

이제 컴포저를 등록했으므로 profile 뷰가 렌더링될 때마다 App\View\Composers\ProfileComposer 클래스의 compose 메서드가 실행됩니다. 컴포저 클래스의 예제를 살펴보겠습니다.

<?php
 
namespace App\View\Composers;
 
use App\Repositories\UserRepository;
use Illuminate\View\View;
 
class ProfileComposer
{
/**
* 새 프로필 컴포저를 생성합니다.
*/
public function __construct(
protected UserRepository $users,
) {}
 
/**
* 뷰에 데이터를 바인딩합니다.
*/
public function compose(View $view): void
{
$view->with('count', $this->users->count());
}
}

보시다시피, 모든 뷰 컴포저는 서비스 컨테이너를 통해 확인되므로 컴포저의 생성자 내에서 필요한 모든 종속성을 타입 힌트할 수 있습니다.

여러 뷰에 컴포저 연결

composer 메서드에 첫 번째 인수로 뷰 배열을 전달하여 여러 뷰에 뷰 컴포저를 한 번에 연결할 수 있습니다.

use App\Views\Composers\MultiComposer;
use Illuminate\Support\Facades\View;
 
View::composer(
['profile', 'dashboard'],
MultiComposer::class
);

composer 메서드는 와일드카드로 * 문자도 허용하므로 모든 뷰에 컴포저를 연결할 수 있습니다.

use Illuminate\Support\Facades;
use Illuminate\View\View;
 
Facades\View::composer('*', function (View $view) {
// ...
});

뷰 생성자

뷰 "생성자"는 뷰 컴포저와 매우 유사하지만 뷰가 렌더링되기를 기다리는 대신 뷰가 인스턴스화된 직후에 실행됩니다. 뷰 생성자를 등록하려면 creator 메서드를 사용합니다.

use App\View\Creators\ProfileCreator;
use Illuminate\Support\Facades\View;
 
View::creator('profile', ProfileCreator::class);

뷰 최적화

기본적으로 블레이드 템플릿 뷰는 요청 시 컴파일됩니다. 뷰를 렌더링하는 요청이 실행되면 라라벨은 뷰의 컴파일된 버전이 존재하는지 확인합니다. 파일이 존재하면 라라벨은 컴파일되지 않은 뷰가 컴파일된 뷰보다 더 최근에 수정되었는지 여부를 확인합니다. 컴파일된 뷰가 존재하지 않거나 컴파일되지 않은 뷰가 수정된 경우 라라벨은 뷰를 다시 컴파일합니다.

요청 중 뷰를 컴파일하면 성능에 약간의 부정적인 영향을 미칠 수 있으므로 라라벨은 애플리케이션에서 사용되는 모든 뷰를 미리 컴파일하는 view:cache Artisan 명령을 제공합니다. 성능 향상을 위해 배포 프로세스의 일부로 이 명령을 실행하는 것이 좋습니다.

php artisan view:cache

뷰 캐시를 생성하려면 다음 명령어를 사용할 수 있습니다:

php artisan view:cache

뷰 캐시를 지우려면 view:clear 명령어를 사용할 수 있습니다:

php artisan view:clear