Laravel View와 Blade 템플릿

Laravel

Laravel View와 Blade 템플릿

itsdev 2025. 4. 29. 00:59

Laravel에서는 사용자에게 보여지는 화면을 구성하기 위해 뷰(View) 라는 개념을 사용한다. 뷰는 기본적으로 HTML을 기반으로 작성되며, PHP 코드를 삽입해 동적인 화면을 만들 수 있다. Laravel에서는 이 작업을 더 깔끔하고 생산적으로 수행하기 위해 Blade라는 강력한 템플릿 엔진을 제공한다. Blade를 사용하면 복잡한 PHP 코드를 깔끔한 문법으로 대체할 수 있으며, 템플릿 상속, 컴포넌트, 조건문, 반복문 등의 기능을 활용해 코드를 재사용하고 구조화할 수 있다.

이 글에서는 뷰(View)와 Blade 템플릿의 기본 개념, 사용법, 그리고 실제 애플리케이션에 어떻게 적용하는지를 체계적으로 정리한다.

1. 뷰(View)란 무엇인가?

View는 사용자가 브라우저를 통해 직접 보게 되는 화면을 의미한다. 웹 애플리케이션에서 뷰는 단순히 HTML을 표시하는 역할을 넘어, 서버에서 가공한 데이터 결과를 동적으로 사용자에게 보여주는 중요한 역할을 한다.

Laravel에서는 클라이언트(사용자)에게 반환할 응답을 뷰 파일을 통해 생성한다. 컨트롤러는 비즈니스 로직을 처리하고 데이터베이스에서 필요한 데이터를 가져오며, 그 결과를 뷰에 전달하여 사용자가 볼 수 있도록 한다.

✅ Laravel에서 뷰 파일의 위치

모든 뷰 파일은 resources/views 디렉터리 아래에 저장된다.

뷰 파일 확장자는 기본적으로 .blade.php를 사용한다.
디렉터리 구조는 자유롭게 구성할 수 있으며, 뷰를 호출할 때는 디렉터리 구분을 점(.)으로 표현한다.

예시:

파일 경로: resources/views/posts/index.blade.php
컨트롤러에서 호출: return view('posts.index');

✅ Blade 템플릿 엔진 사용

Laravel은 기본적으로 Blade라는 템플릿 엔진을 사용하여 뷰를 작성한다. Blade는 PHP 문법을 보다 깔끔하고 직관적으로 사용할 수 있도록 도와주며, 코드 재사용성과 유지보수성을 높여준다.

Blade를 사용하면 다음과 같은 이점을 얻을 수 있다:

조건문, 반복문 등의 문법을 더 간결하게 작성 가능
템플릿 상속(layout), 컴포넌트 분리 등 고급 기능 제공
자동으로 HTML 이스케이프 처리 (보안 강화)

Blade 문법 예시:

{{ $변수명 }} → PHP의 echo 구문 대신 사용

✅ 뷰 파일 호출 흐름 요약

사용자가 웹 브라우저로 특정 URL 요청
해당 요청이 컨트롤러에 도달
컨트롤러가 데이터를 준비한 후 view() 함수를 통해 뷰 파일 호출
뷰 파일이 HTML과 함께 사용자에게 반환되어 브라우저에 표시

2. 뷰 파일의 기본 구조

Laravel에서 뷰 파일은 사용자에게 보여지는 화면을 정의하는 HTML 파일이며, Blade 템플릿 문법을 이용해 더욱 깔끔하고 동적인 페이지를 만들 수 있다.

✅ 뷰 파일 작성 규칙

뷰 파일의 확장자는 반드시 .blade.php를 사용한다.
HTML 안에 Blade 문법({{ }}, @foreach 등)을 삽입할 수 있다.
뷰 파일을 호출할 때는 파일 경로를 점(.) 표기법으로 참조한다.

예시:

파일 경로: resources/views/posts/index.blade.php
호출 방법: view('posts.index')

📌 간단한 뷰 파일 예시 (resources/views/posts/index.blade.php)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>글 목록</title>
</head>
<body>
    <h1>글 목록</h1>

    @foreach ($posts as $post)
        <div>
            <h2>{{ $post->title }}</h2>
            <p>{{ $post->contents }}</p>
        </div>
    @endforeach

</body>
</html>

이 예시에서는 @foreach 반복문과 {{ }} 출력 문법을 사용하여, 데이터베이스에서 가져온 글 목록을 화면에 출력하고 있다.

✅ {{ }} 문법의 특징

{{ }} 안에 변수를 넣으면 해당 값이 출력된다.
자동으로 HTML 이스케이프 처리가 되어 XSS(크로스 사이트 스크립팅) 공격을 예방할 수 있다.
PHP의 echo 구문을 대체하며, 더 깔끔하고 안전한 코드를 작성할 수 있다.

예시:

{{ $post->title }} → 해당 글의 제목 출력

✅ Blade의 표현식 정리

변수 출력: {{ $변수명 }}
PHP 코드 실행: @php ... @endphp
조건문: @if ~ @endif, @isset, @empty
반복문: @foreach, @for, @while

✅ 주의사항

뷰 파일 이름과 경로는 소문자로 작성하는 것이 일반적이다.
Blade 디렉터리 내 파일 참조 시 확장자(.blade.php)는 생략하고, 디렉터리 구분은 점(.)으로 한다.
Blade 구문 오류(예: @foreach 누락)는 뷰 렌더링 실패로 이어질 수 있으니 주의해야 한다.

3. Blade 템플릿 엔진의 특징

Blade는 Laravel에 기본 내장된 가볍고 강력한 템플릿 엔진이다. PHP 코드를 깔끔하고 직관적으로 작성할 수 있게 해주며, 뷰(View)를 구성하는 다양한 기능을 지원한다.

✅ Blade의 주요 특징

템플릿 상속 (Layout 구성) - 기본 레이아웃 파일을 정의하고, 개별 페이지에서 필요한 부분만 채워넣을 수 있다. - @extends, @section, @yield 지시어를 사용한다.
조건문 지원 - @if, @elseif, @else, @unless 등의 간결한 문법으로 조건 분기 처리가 가능하다.
반복문 지원 - @foreach, @for, @while 등을 지원하여 데이터를 반복 출력할 수 있다.
컴포넌트(Component)와 인클루드(Include) - 뷰를 재사용 가능한 단위로 쪼갤 수 있다. - @component, @include 지시어를 사용해 다른 Blade 파일을 불러올 수 있다.
자동 HTML 이스케이프 처리 - {{ }}를 사용하면 자동으로 HTML 특수문자를 이스케이프하여 XSS(크로스 사이트 스크립팅) 공격을 예방할 수 있다.
직접 PHP 작성 가능 - @php ... @endphp 구문을 사용하면 필요한 경우 직접 PHP 코드를 삽입할 수 있다.

📌 Blade 문법 간단히 보기

✅ 변수 출력

{{ $변수명 }}

Blade에서는 {{ }} 안에 변수를 넣어 출력할 수 있다. 이때 출력값은 HTML 이스케이프가 자동 적용된다.

✅ 조건문 예시

@if ($posts->isEmpty())
    글이 없습니다.
@else
    글 목록 출력
@endif

✅ 반복문 예시

@foreach ($posts as $post)
    <p>{{ $post->title }}</p>
@endforeach

✅ 추가 Blade 문법

Switch 문:

@switch($status)
    @case('draft')
        초안 상태입니다.
        @break

    @case('published')
        발행된 글입니다.
        @break

    @default
        상태를 알 수 없습니다.
@endswitch

Loop 정보 활용:

@foreach ($posts as $post)
    @if ($loop->first)
        첫 번째 글입니다!
    @endif

    <p>{{ $post->title }}</p>
@endforeach

$loop 변수는 반복문 안에서 현재 순서, 총 개수, 첫 번째/마지막 여부 등을 제공한다.

4. 컨트롤러와 뷰 연결하기

Laravel에서는 컨트롤러에서 비즈니스 로직을 처리한 뒤, 최종적으로 사용자가 볼 수 있도록 뷰(View)를 반환한다. 뷰를 반환하는 가장 기본적인 방법은 view() 함수를 사용하는 것이다.

✅ 컨트롤러에서 뷰 반환하는 기본 구조

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::all(); // 데이터베이스에서 모든 게시글 조회
        return view('posts.index', ['posts' => $posts]); // 'posts.index' 뷰에 데이터 전달
    }
}

여기서 view('posts.index')는 resources/views/posts/index.blade.php 파일을 가리킨다. 점(.) 표기법을 사용해 디렉터리 구분을 표현하며, 확장자 .blade.php는 생략한다.

✅ 데이터 전달 방법

컨트롤러에서 view() 함수의 두 번째 인자로 배열을 넘기면, 뷰 파일 안에서 해당 배열의 키를 변수처럼 사용할 수 있다.

return view('posts.index', ['posts' => $posts]);

✅ 위 예시에서는 `$posts`라는 이름으로 뷰에 데이터가 전달된다.

✅ 뷰 파일에서 데이터 사용 예시

@foreach ($posts as $post)
    <div>
        <h2>{{ $post->title }}</h2>
        <p>{{ $post->contents }}</p>
    </div>
@endforeach

뷰 파일에서는 Blade 문법을 이용해 전달받은 데이터를 자유롭게 출력할 수 있다.

✅ view() 함수의 다양한 사용법

단일 데이터 전달:

return view('posts.index', ['title' => '글 목록']);

compact() 함수 사용:

return view('posts.index', compact('posts'));

compact('posts')는 ['posts' => $posts]와 동일하게 작동한다. 변수가 많을 때 코드를 더 깔끔하게 만들 수 있다.

✅ 주의사항

전달하는 배열의 키 이름이 뷰 파일 안에서 사용할 변수 이름이 된다.
뷰 파일 경로를 잘못 지정하거나 존재하지 않는 경우 ViewNotFoundException 에러가 발생할 수 있다.

5. 뷰 파일 이름 규칙

Laravel에서 뷰(View) 파일을 작성할 때는 일관성 있고 명확한 규칙을 따르는 것이 중요하다. 규칙을 지키면 컨트롤러에서 뷰를 참조할 때 오류를 줄이고, 프로젝트 규모가 커져도 구조를 쉽게 유지할 수 있다.

✅ 디렉터리 경로는 점(.)으로 구분

뷰 파일을 참조할 때는 파일 시스템 경로가 아니라 점(.) 표기법을 사용한다. 디렉터리 구분을 슬래시(/) 대신 점(.)으로 표현한다.

예시:

파일 경로: resources/views/posts/index.blade.php
컨트롤러에서 호출: view('posts.index')

※ 여기서 posts는 폴더명, index는 파일명을 의미한다.

✅ 파일 이름은 소문자로 작성하는 것이 일반적

뷰 파일 이름은 특별한 경우를 제외하고 소문자로 작성하는 것이 권장된다. Laravel 자체는 대소문자 구분에 관대하지만, 서버 환경(특히 Linux 계열)은 대소문자를 구분하므로 통일성을 위해 소문자 사용을 추천한다.

예시:

index.blade.php (O)
Index.blade.php (X - 가능은 하지만 권장하지 않음)

✅ 확장자는 반드시 .blade.php로 끝나야 함

Blade 템플릿 엔진을 사용하려면 뷰 파일 확장자는 반드시 .blade.php로 끝나야 한다. 이 확장자가 붙어야 Blade 컴파일러가 해당 파일을 올바르게 인식하고 처리한다.

잘못된 확장자 예시:

index.php (X - Blade 문법이 작동하지 않음)
index.blade.html (X - Laravel에서 인식 못 함)

올바른 확장자 예시:

index.blade.php (O)

✅ 예시 정리

파일 경로	뷰 호출 방법
resources/views/posts/index.blade.php	view('posts.index')
resources/views/admin/dashboard.blade.php	view('admin.dashboard')
resources/views/auth/login.blade.php	view('auth.login')

✅ 뷰 파일 정리 팁

폴더 구조는 논리적으로 나눈다 (예: posts/, users/, admin/)
관련 뷰는 같은 디렉터리에 모아 관리한다.
복잡한 뷰는 컴포넌트나 인클루드를 이용해 쪼개는 것이 좋다.

정리하며

Laravel의 View와 Blade 템플릿 엔진은 사용자 화면을 동적으로 구성하고, 코드를 깔끔하게 관리할 수 있도록 돕는다. Blade는 변수 출력, 조건문, 반복문, 템플릿 상속 등 다양한 기능을 간결한 문법으로 제공해 생산성과 유지보수성을 높여준다.

컨트롤러와 뷰의 명확한 분리는 MVC 패턴의 핵심 원칙을 따르며, 뷰 파일은 소문자 파일명과 점(.) 표기법, .blade.php 확장자 규칙을 지켜야 한다.

Blade를 잘 활용하면 중복 코드를 줄이고, 보안성과 일관성을 갖춘 애플리케이션을 개발할 수 있다. 뷰와 Blade를 체계적으로 다루는 것은 Laravel 개발의 기본기가 된다.

📌 다음 글 안내

View와 Blade 템플릿을 통해 사용자에게 결과를 보여주는 방법을 배웠다면, 이제 서버에서 데이터를 효율적으로 다루는 방법을 알아야 한다. Laravel에서는 모델(Model)과 Eloquent ORM을 사용해 데이터베이스 작업을 깔끔하고 직관적으로 처리할 수 있다.

👉 다음 글: 모델(Model)과 ORM 기본 바로 가기

👉 이전 글: Laravel Controller (라라벨 컨트롤러) 만들기

728x90

'Laravel' 카테고리의 다른 글

Laravel Migration & Seeding (라라벨 마이그레이션과 시딩) (1)	2025.05.01
Laravel Model (라라벨 모델)과 Eloquent ORM 기본 (1)	2025.04.29
Laravel Controller (라라벨 컨트롤러) 만들기 (2)	2025.04.28
Laravel Routing (라라벨 라우팅) 기본 (2)	2025.04.26
Laravel Folder (라라벨 폴더) 구조 (3)	2025.04.25

이 포스팅은 제휴마케팅 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

현재글Laravel View와 Blade 템플릿

itsdev의 IT Blog