[Laravel] 05. 블레이드 템플릿

yunulog·2022년 10월 10일

Laravel

목록 보기

5/6

블레이드

[공식문서] 블레이드는 라라벨에서 제공하는 간단하지만 강력한 템플릿 엔진입니다. 다른 인지도 높은 PHP 템플릿 엔진들과는 달리 블레이드는 뷰에서 순수한 PHP 코드를 작성하는 것을 허용합니다. 실제로는, 모든 블레이드 뷰는 단순한 PHP 코드로 컴파일되고 변경되기 전까지 캐시 됩니다. 이는 블레이드가 애플리케이션에 아무런 부담을 주지 않는다는 것을 의미합니다. 블레이드 뷰 파일은 .blade.php 형식의 파일 확장자를 사용하고 주로 resources/views에 저장됩니다.

데이터 보간

블레이드에선 데이터 표시를 위해 {{ }} 형태의 이중 중괄호를 사용한다.
Hello, {{ $name }}.

블레이드에서 {{ $name }} 은 php문법에서 <?=$name> 과 같다.

Escape 처리되지 않은 데이터 표시하기

기본적으로 블레이드 {{ }} 문장은 XSS 공격을 방지하기 위해 PHP의 htmlspecialchars 함수를 통과합니다. 데이터를 escape 처리를 하지 않으려면 다음과 같이 작성하면 됩니다.

Hello, {!! $name !!}.

주석

{{-- blade에서는 {{-- 주석내용 --}} 형식으로 주석 처리를 한다. --}}

blade 주석은 html주석과는 달리, 어플리케이션이 반환하는 html에 포함되지 않기에 개발자도구 등으로 클라이언트단에서 보는 것이 불가능하다.

제어구조

조건문 if

@if, @elseif, @else, 그리고 @endif 지시어을 이용하여 조건문을 만들 수 있다.

@if (count($records) === 1)
I have one record!
@elseif (count($records) > 1)
I have multiple records!
@else
I don't have any records!
@endif

if 문을 끝낼 때 @endif 를 입력하면 된다.

조건문 unless

if문 안에 !를 넣어 조건을 설정하는 것을 피하기 위해 @unless를 이용하는 방법이 있다.

@if(true)
Hello, world
@endif

@unless(false)
  Hello, world
@endunless

위 두 코드는 같은 결과를 도출해낸다.

인증 관련 지시어

@auth 그리고 @guest 지시어는 현재 접속자가 인증된 사용자인지 아니면 guest 인지 판별하는데 사용가능한 편의 기능이다.
끝낼 때는 역시 end를 붙여 @endauth, @endguest로 마치면 된다.

@auth
    // The user is authenticated...
@endauth

@guest
    // The user is not authenticated...
@endguest

반복문(for)

@for와 @endfor, @foreach와 @endforeach 지시어를 이용하여 반복문을 만들 수 있다.

@for ($i = 0; $i < 10; $i++)
    The current value is {{ $i }}
@endfor

@foreach ($users as $user)
    <p>This is user {{ $user->id }}</p>
@endforeach

for 문을 끝낼 때 @endfor, @endforeach 를 입력하면 된다.

PHP

상황에 따라서, 뷰에서 PHP 코드 자체를 삽입하는 것이 유용할 수도 있다. 템플릿 안에서 블레이드의 @php 지시어를 사용하여 해당 블럭의 PHP를 실행 할 수 있다.

@php
    //
@endphp

상속

템플릿을 상속한다는 것은, 어떤 정해진 레이아웃이 있다면, 거기에 일부 내용만 다르게 데이터를 바인딩하거나 삽입할 수 있다는 뜻이다.

상속과 관련된 지시어는 @extends, @yield, @section, @show, @stack이 있다.

레이아웃 정의하기

상속과 관련된 지시어를 공부하기 전에 상속을 시킬, 즉 대부분의 페이지에서 사용할 “마스터” 페이지 레이아웃을 만들어야 한다.

<!-- Stored in resources/views/layouts/app.blade.php -->

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

예를 들어 resources/views/layouts/app.blade.php 파일에 위와 같이 코드를 구성해두고 이 레이아웃을 다른 뷰에서 상속받아 사용할 수 있게끔 한다.

`@extend`

@extends 는 자식 템플릿이 특정 템플릿에 대해 상속받을때 사용한다.

views/layouts/app.blade.php 라는 레이아웃 템플릿이 있을 때, 자식 템플릿에서는 아래와 같이 상속받을 수 있다. 자식 템플릿의 맨 위에 해당 지시어를 사용한다.

@extends('layouts.app')

`@yield / @section-@endsection`

yield 키워드는 부모 템플릿에서 사용하게 되면 자식 템플릿에서 내용을 대체(Replace)할 수 있게 된다.

예를 들어 부모 템플릿에서 다음과 같이 정의되어 있다고 가정하자.
title 은 이름이고, Home page 는 기본 값이다.
따라서 자식 템플릿에서 별도로 정의되어 있지 않다면 Home page 가 나타난다.

@yield('title', 'Home page')

여기서 자식 템플릿에서 이 부분에 데이터를 대체하기 위해서는 @section, @endsection 을 사용한다. 이렇게 사용하면 @yield 를 사용하여 기본값 Home page 로 설정되었던 부분이 Hello, world 로 대체된다.

@section('title')
    Hello, world
@endsection

{{-- @section('title', 'Hello, world') --}}

@endsection 을 사용하지 않고 축약형태로도 사용할 수 있다.

`@section/@show - @endsection`

@section 키워드는 부모 템플릿에서도 사용할 수 있는데, @show 지시어와 함께 사용할 수 있다.

부모 템플릿에서 @section 을 사용하여 표현하려면 @show 지시어를 함께 사용해야 하며 사용한 부분에 자식 템플식에 지정한 내용으로 치환된다.

부모 템플릿에 아래와 같이 정의되어 있다면,

@section('main')
    Hello, world
@show

이제, 자식 템플릿에서 사용할 텐데, @yield 에서 사용했던 것처럼 사용하면 Hello, world 가 나타나지 않을 것이다. 이는 부모 템플릿에 있는 기본값이기 때문이다.
만약, 자식 템플릿에서 Hello, world 에 더해, 내용을 추가하고 싶다면 @parent 지시어와 함께 사용하자.

@section('main')
    @parent
    Who are you?
@endsection

부모 템플릿에서 @section/@show 를 사용한 것과 @yield 를 사용한 것은 기능측면으로는 본질적으로 같으나 차이가 있다면 자식 템플릿에서 @parent 를 사용하여 부모 템플릿의 기본값에 접근할 수 있냐 없냐의 차이다. @yield 를 사용하게 되면 Home page 라는 기본 값에는 접근할 수 없다.

`@include`

@include 를 이용하면 다른 템플릿을 포함할 수 있으며, 템플릿에 데이터를 같이 전달할 수도 있다.

아래와 같이 사용하면 views/main.blade.php 를 포함시킨다.

$title 에 Hello, world 라는 값을 넣어 포함시킬 수 있다.

@include('main', ['title' => 'Hello, world'])

다른 템플릿으로부터 전달받은 변수를 {{ $title }} 과 같이 사용하게 되면, Hello, world 가 나타난다.

`@includeIf, @includeWhen, @includeFirst`

@includeIf 를 사용하면 어떤 조건에 부합하면 템플릿을 포함
@includeWhen 을 사용하면 주어진 조건에 부합하게 되면 포함
@includeFirst 를 사용하게 되면 주어진 여러 개의 템플릿 중에서 존재하는 첫 번째 템플릿을 포함

컴포넌트

@include 로 처리하기 애매한 부분들은 컴포넌트@component를 이용해 본문을 전달할 수 있다.

예를 들면 views/paritals/modal.blade.php 에 본문을 전달한다고 가정해보자. 다음과 같이 해볼 수 있다.
body 의 내용이 짧다면 다행이지만, 만약 길다면 코드가 한 줄로 너무 길어져 시인성이 좋지 않다.

@include('partials.modal', ['body' => '<h1>Hello, world</h1>'])

이 코드를 컴포넌트를 사용하여 구성하면 아래와 같이 할 수 있다.

@component('partials.modal')
    <h1>Hello, world</h1>
@endcomponent

이렇게 사용한 코드를 views/partials/model.blade.php 에서 사용하려면 {{ $slot }} 을 사용하여 내용을 표현할 수 있게된다.

즉, $slot 은 슬롯에 이름을 지정하지 않고 사용했을 때 선언되는 가장 기본적인 형태라는 의미다.

다중 슬릇

이름이 있는 슬롯(Named Slot)을 사용하면 여러 개의 슬릇을 사용하여 컴포넌트에 전달할 수 있게 된다.

예를 들면 title 이라는 이름을 가진 슬롯이 있을 때,

@component('partials.modal')
    @slot('title')
        <h1>Hello, world</h1>
    @endslot

    {{-- ... --}}
@endcomponent

자식 템플릿에서는 {{ $slot }} 이 아닌, {{ $title }} 을 사용하여 표현할 수 있으며, 기존의 $slot 은 이름 없이 사용된 슬롯에게 적용할 수 있다.

yunulog

이전 포스트

[Laravel] 04. 컨트롤러(Controller)

다음 포스트