블레이드(blade)는 라라벨의 템플릿 언어인 동시에 HTML 컴파일 엔진이다. 실제로 모든 블레이드 뷰는 단순한 PHP 코드로 컴파일되고 변경되기 전까지 캐시 되는데, 이는 블레이드가 애플리케이션에 아무런 부담을 주지 않는다는 것을 의미한다.
블레이드 뷰 파일은 .blade.php 형식의 파일 확장자를 사용하고 주로 resources/views 폴더 아래에 저장된다.
변수를 이용한 문자열 보간
블레이드 문자열 보간 문법을 사용한 예제를 살펴보자
<!-- laravel 5.6 이하 -->
<h1>{{ $greeting or 'Hello ' }} {{ $name or '' }}</h1>
<!-- laravel 5.7 ------->
<h1>{{ $greeting ?? 'Hello ' }} {{ $name ?? '' }}</h1>
블레이드는 문자열 보간을 위해 이중 중괄호({{ }}) 를 이용한다. {{ $name }} 은 <?=$name; ?> PHP 문법과 같다. {{ $greeting or ‘Hello’ }} 또는 {{ $greeting ?? ‘Hello’ }}는 <?= isset($greeting) ? $greeting : ‘Hello’; ?> 와 같다.
블레이드는 XSS(cross-site scripting) 공격으로부터 서비스를 보호하기 위해 문자열을 보간할 때 특수문자를 이스케이프(escape)한다. 이스케이프하지 않은 채 문자열을 뷰에 포함하려면 {!! $var !!} 문법을 이용한다.
몇몇 자바스크립트 프레임워크도 {{ }} 를 문자열 보간 문법으로 사용하기도 하는데, 블레이드 뷰 파일에서는 이런 경우 @{{ }} 문법을 사용하면 @는 삭제하고 바로 뒤에 따라오는 {{ }} 를 블레이드 문법으로 인식하지 않는다.
주석
블레이드에서 주석(comment)은 {{– 주석 –}} 형식을 사용한다.
<!-- HTML 주석 안에서 {{ $name }} 을(를) 출력합니다. -->
{{-- 블레이드 주석 안에서 {{ $name }} 을(를) 출력합니다. --}}
<h1>{{ $greeting or 'Hello' }} {{ $name or '' }}</h1>
위 코드 실행 결과의 소스를 보면 다음과 같이 HTML 주석은 표시하고 블레이드의 주석은 PHP 컴파일 과정에서 제외되어 나타나지 않는다.
<!-- HTML 주석 안에서 {{ $name }} 을(를) 출력합니다. -->
<h1>안녕하세요? Foo</h1>
제어구조 – 조건문
조건식의 평가 결과에 따라 조건문 안의 내용 출력을 제어할 수 있다.
@if($itemCount == count($items))
<p>{{ $itemCount }} 종류의 과일이 있습니다.</p>
@else
<p>아무것도 없군요!</p>
@endif
위 블레이드 구문은 아래의 PHP 구문과 같다.
<?php
if($itemCount == count($items)){
echo "<p>{{ $itemCount }} 종류의 과일이 있습니다.</p>";
}else{
echo "<p>아무것도 없군요!</p>";
}
제어구조 – 반복문
반복문은 배열 형태의 데이터를 순회 하면서 배열 원소를 출력할 때 사용할 수 있다.
<ul>
@foreach($items as $item)
<li>{{ $item }}</li>
@endforeach
</ul>
@foreach 뿐만 아니라 @for, @while 도 사용할 수 있다.
또한 PHP 에는 없는 @forelse 라는 특수한 제어구조가 있는데 @forelse 는 @if 와 @foreach 의 결합이다. 뷰로 넘어온 배열에 값이 있으면 @forelse 를 타고, 그렇지 않으면 @empty 를 탄다. 사용 예제는 다음과 같다.
<ul>
@forelse($items as $item)
<li>{{ $item }}</li>
@empty
<li>아무것도 없군요!</li>
@endforelse
</ul>
템플릿 상속
웹 애플리케이션은 템플릿에 해당하는 공통된 부분이 페이지마다 중복되어 사용되는 경우가 많다. 이와 같이 중복되는 부분을 최상위 부모 템플릿으로 만들 수 있는데, 이를 마스터 레이아웃이라고 부른다. 블레이드에서 이를 작성하는 예를 들면 다음과 같다.
resources/views/layouts/master.blade.php
<!doctype html>
<head>
<meta charset="UTF-8">
<title>라라벨 배우기</title>
</head>
<body>
@yield('content')
</body>
</html>
마스터 레이아웃을 상속받도록 welcome.blade.php 파일을 작성하자.
resources/views/welcome.blade.php
@extends('layouts.master') // resources/views/layouts/master.blade.php 라는 부모를 상속 받는다는 의미
@section('content') // 마스터 레이아웃의 @yield('content') 부분에 삽입된다.
<p>저는 자식 뷰의 'content' 섹션입니다.</p>
@endsection
@section의 이름은 가독성을 위해 의미있는 이름으로 짓되 특별한 규칙은 없으며, 여러개의 @section 이 작성될 수 있다. 이 경우 마스터 레이아웃에도 @section 에 대응하는 @yield 가 추가되어야 한다.
조각 뷰 삽입
블레이드로 정의된 뷰에서 다른 조각 뷰를 가져다가 삽입할 수 있다. 예를 들어 다음과 같은 조각 뷰를 만들어보자.
resources/views/partials/footer.blade.php
<footer>
<p>저는 꼬리말입니다.</p>
</footer>
조각 뷰는 자식 뷰와 달리 @extends 키워드가 없는 순수 HTML 조각이다.
웰컴 뷰에서 @include 키워드로 위에서 만든 조각 뷰를 가져올 수 있다.
@extends('layouts.master')
@section('content')
@include('partials.footer')
@endsection
@include 키워드를 이용한 조각 뷰 삽입은 마스터 레이아웃, 자식 뷰의 섹셔 안 또는 밖 어디에서든 할 수 있다.