티스토리 뷰


블레이드(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 키워드를 이용한 조각 뷰 삽입은 마스터 레이아웃, 자식 뷰의 섹션 안 또는 밖 어디에서든 할 수 있다.


공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크