[Laravel] 라라벨 블레이드(blade)

블레이드(blade)는 라라벨의 템플릿 언어인 동시에 HTML 컴파일 엔진이다. 실제로 모든 블레이드 뷰는 단순한 PHP 코드로 컴파일되고 변경되기 전까지 캐시 되는데, 이는 블레이드가 애플리케이션에 아무런 부담을 주지 않는다는 것을 의미한다. 블레이드 뷰 파일은 .blade.php 형식의 파일 확장자를 사용하고 주로 resources/views 폴더 아래에 저장된다.
변수를 이용한 문자열 보간
블레이드 문자열 보간 문법을 사용한 예제를 살펴보자
<!-- laravel 5.6 이하 -->
<h1>{{ $greeting or 'Hello ' }}</h1>
<!-- laravel 5.7 -->
<h1>{{ $greeting ?? 'Hello ' }}</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 키워드를 이용한 조각 뷰 삽입은 마스터 레이아웃, 자식 뷰의 섹션 안 또는 밖 어디에서든 할 수 있다.