Blade 처음 써보니까 생각보다 헷갈리는 부분이 많았다.
특히 for문 돌리려고 보니까 문법이 익숙하지 않아서 정리해봤다.
퍼블리셔 기준으로 "이거 왜 쓰는지" 위주로 이해하려고 한 글이다.
Blade란?
Laravel에서 HTML을 만들어주는 템플릿 엔진.
파일 확장자는 .blade.php
HTML 안에서 @문법, {{ }}를 사용해 서버 데이터를 화면에 출력한다.
🐸 React로 치면 JSX 안에서 map이나 조건 렌더링 하는 느낌이랑 비슷하다.
🐸 퍼블리셔 입장에서는
"하드코딩 HTML → 데이터 기반 UI로 바꾸는 과정"이라고 보면 이해가 쉽다.
1. 변수 출력 {{ }}
<span>{{ $user['name'] }}</span>- 변수 값을 HTML에 출력
<,>같은 HTML 태그는 자동으로 escape 처리됨 (안전)
🐸 사용자 이름, 텍스트 같은 기본 출력에 사용
2. 반복문 @foreach
@foreach ($products as $product)
<div class="product-item">
<p>{{ $product['name'] }}</p>
<p>{{ $product['price'] }}원</p>
</div>
@endforeach- 배열 데이터를 반복해서 UI 생성
- 상품 리스트, 게시글 목록 등 반복되는 구조에 사용
🐸 같은 구조 HTML을 여러 개 찍어내는 느낌
🐸 처음엔 그냥 PHP for문 아닌가..? 했는데 써보니까 또 다름
3. 조건문 @if
@if (!empty($products))
<div>상품이 있습니다</div>
@endif- 조건이 참일 때만 출력
🐸 데이터 있을 때만 영역 보여주기 같은 데 많이 씀
4. 조건 분기 @if / @elseif / @else
@if ($product['status'] === 'sale')
<span>판매중</span>
@elseif ($product['status'] === 'soldout')
<span>품절</span>
@else
<span>준비중</span>
@endif🐸 상태값에 따라 UI 바꿀 때 사용
🐸 이런 건 거의 무조건 들어가는 듯
5. 변수 존재 여부 @isset
@isset($user)
<div>{{ $user['name'] }}</div>
@endisset- 변수가 존재하고 null이 아닐 때만 출력
🐸 로그인 정보나 선택된 값 있을 때 체크용
6. 데이터 접근 방식
서버 데이터 예시:
$product = [
'id' => 1,
'name' => '스니커즈',
'price' => 120000,
];사용:
{{ $product['name'] }}
{{ $product['price'] }}🐸 배열에서 값 꺼내는 건 그냥 JS랑 비슷해서 금방 익숙해짐
7. @forelse (이거 은근 중요)
@forelse ($products as $product)
<p>{{ $product['name'] }}</p>
@empty
<p>등록된 상품이 없습니다</p>
@endforelse- 데이터 있으면 반복
- 없으면 empty UI 출력
🐸 이거 몰라서 if + foreach 따로 썼었는데
🐸 그냥 이거 쓰는 게 훨씬 깔끔함
8. HTML 그대로 출력 {!! !!} (주의)
{!! $description !!}- HTML 태그 그대로 출력
- escape 안됨
⚠️ 사용자 입력 데이터면 위험함 (XSS)
🐸 진짜 필요한 경우 아니면 잘 안 쓰는 게 맞는 듯
9. 컴포넌트 분리 @include
@include('components.product-card', ['product' => $product])- 반복 UI를 분리해서 재사용
- 유지보수에 중요
🐸 같은 UI 여러 번 쓰면 이거로 빼는 게 편함
🐸 안 빼면 나중에 수정 지옥됨
10. Blade 주석
{{-- 이 주석은 브라우저에 보이지 않음 --}}🐸 HTML 주석이랑 다르게 아예 안 내려감
11. 실전 예시 (상품 리스트)
@if (!empty($products))
<div class="product-list">
@foreach ($products as $product)
<div class="product-card">
<h3>{{ $product['name'] }}</h3>
<p>{{ $product['price'] }}원</p>
@if ($product['status'] === 'sale')
<span class="badge">판매중</span>
@else
<span class="badge">품절</span>
@endif
</div>
@endforeach
</div>
@endif🐸 실제로는 이런 구조 계속 반복해서 쓰게 됨
🐸 데이터 체크 + 반복 + 조건 이 세 개가 거의 기본 패턴
12. 자주 쓰는 문법 요약
| 문법 | 용도 |
|---|---|
{{ $변수 }} | 값 출력 |
{!! $변수 !!} | HTML 그대로 출력 |
@if | 조건문 |
@foreach | 반복 |
@forelse | 반복 + empty 처리 |
@isset | 변수 존재 확인 |
@include | 컴포넌트 분리 |
$arr['key'] | 배열 값 접근 |
한줄 정리
🐸 결국 Blade는
"데이터 받아서 HTML 찍어내는 도구"라고 생각하면 편하다.
