[Handlebars] handlebars 문법 정리

handlebars란?

handlevars는 ejs, pug 와 같은 템플릿 엔진의 하나로, 템플릿과 입력 객체를 사용하여 HTML을 표현할 수 있습니다.

{{}} 와 같은 이중 중괄호를 사용하여 로직을 표현하며, 이를 표현식이라고 합니다.

<p>{{firstname}} {{lastname}}</p>

{
  firstname: "Yehuda",
  lastname: "Katz",
}

다음과 같은 템플릿과 입력 객체가 있을 경우, 표현식은 아래와 같이 컴파일됩니다.

<p>Yehuda Katz</p>

내장 헬퍼

#if

• 블록을 조건부로 렌더링할 때 사용합니다. 인수가 false, undefined, null, "", 0, []을 반환하는 경우 블록이 렌더링되지 않습니다.

<div class="entry">
{{#if author}}
  <h1>{{firstName}} {{lastName}}</h1>
{{/if}}
</div>

빈 Object를 전달했을 경우, author의 조건이 undefined기 때문에 다음과 같이 출력됩니다.

<div class="entry"></div>

#if 표현식을 사용할 때, else를 사용하여 표현식이 거짓 값을 반환하는 경우 표시할 템플릿을 지정할 수 있습니다.

<div class="entry">
{{#if author}}
  <h1>{{firstName}} {{lastName}}</h1>
{{else}}
  <h1>Unknown Author</h1>
{{/if}}
</div>

else는 #if 내에서 사용하는 것에 주의해야 합니다. 🤖

includeZero

#if 의 경우 인수가 0일 경우 블록을 렌더링하지 않는데, includeZero=true 옵션을 설정하면 0일 경우에도 렌더링이 되도록 설정할 수 있습니다.

{{#if 0 includeZero=true}}
  <h1>Does render</h1>
{{/if}}

0 이외 undefined, false, null 등에는 적용되지 않습니다.

#unless

헬퍼를 역으로 쓸 수 있게 해주는 헬퍼입니다.(자바스크립트의 !와 같은 느낌)
#if 와 반대로 표현식이 거짓 값일 경우 렌더링합니다.

<div class="entry">
{{#unless license}}
  <h3 class="warning">WARNING: This entry does not have a license!</h3>
{{/unless}}
</div>

#each

목록 또는 요소를 반복할 때 사용하는 헬퍼입니다. this 키워드를 사용하여 반복되는 요소를 참조할 수 있습니다.

<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>

{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley",
  ],
}

예를 들어 다음과 같은 객체가 입력으로 주어진다면, 템플릿은 아래와 같이 렌더링됩니다.

<ul class="people_list">
    <li>Yehuda Katz</li>
    <li>Alan Johnson</li>
    <li>Charles Jolley</li>
</ul>

else

#each 문 사용 중,else를 사용하면 목록이 비어 있을 경우 표시되는 섹션을 선택적으로 제공할 수 있습니다.

{{#each paragraphs}}
  <p>{{this}}</p>
{{else}}
  <p class="empty">No content</p>
{{/each}}

@index

{{#each array}} {{@index}}: {{this}} {{/each}}

#each문 사용 중,@index 를 사용하여 루프 인덱스에 접근할 수 있습니다. (map, forEach 메서드에서 첫번째 인수와 같은 역할)

@key

{{#each object}} {{@key}}: {{this}} {{/each}}

객체를 반복하여 사용할 경우, @key를 사용하여 객체의 키에 접근할 수 있습니다.
중첩된 #each 블록에서는 {{@../index}}문을 사용하여 부모 인덱스에 접근할 수 있습니다.

#with

{{#with person}}
  {{firstname}} {{lastname}}
{{/with}}

{
  person: {
    firstname: "Yehuda",
    lastname: "Katz",
  },
}

#with 헬퍼를 사용하면 객체의 속성에 바로 접근할 수 있습니다.

Partial

Partial은 템플릿 재사용을 가능하게 해 주는 기능으로, 템플릿에서 다른 템플릿을 호출할 수 있습니다.

Partial 등록

Handlebars.registerPartial 문법을 통해 재사용할 템플릿을 등록할 수 있습니다.

Handlebars.registerPartial('myPartial', '{{prefix}}');

Partial 사용

{{> myPartial }}

Partial으로 등록한 템플릿은 다음과 같은 구문으로 사용할 수 있습니다.
만약 yml 등으로 작성한 컨텍스트를 사용하려면, 다음과 같이 컨텍스트를 전달할 수 있습니다.

{{> myPartial myContext}}

참고자료

• https://handlebarsjs.com/guide/ (handlebars 공식 문서)