[javascript] jQuery의 템플릿 엔진 사용법
jQuery를 사용하여 템플릿 엔진을 구현하는 방법에 대해 알아봅니다.
목차
소개
템플릿 엔진은 동적으로 내용을 생성하고 표시하기 위해 사용됩니다. jQuery를 사용하여 템플릿 엔진을 사용하면 효율적으로 화면을 렌더링할 수 있습니다.
기본 사용법
// HTML 템플릿 정의
var template = '<div>Hello, {{name}}!</div>';
// 데이터 적용
var data = { name: 'World' };
// 템플릿 적용
var rendered = $(Mustache.render(template, data));
$('#container').html(rendered);
위 코드에서는 Mustache 템플릿 엔진을 사용하여 HTML 템플릿에 데이터를 적용하고, 최종적으로 렌더링된 내용을 #container 엘리먼트에 삽입하는 과정을 보여줍니다.
반복문과 조건문
Mustache 템플릿 엔진을 사용하면 반복문과 조건문을 템플릿에 쉽게 적용할 수 있습니다.
// 반복문과 조건문을 포함한 템플릿
var template = '<ul>{{#items}}<li>{{name}}</li>{{/items}}</ul>{{^items}}No items{{/items}}';
// 데이터
var data = { items: [{ name: 'Item 1' }, { name: 'Item 2' }] };
var emptyData = { items: [] };
// 템플릿 적용
var rendered = $(Mustache.render(template, data)); // 리스트 출력
var renderedEmpty = $(Mustache.render(template, emptyData)); // "No items" 출력
위 코드에서는 {{#items}}와 {{/items}}를 사용하여 items 배열을 반복하고, {{^items}}를 사용하여 데이터가 없는 경우에 대한 조건을 처리하는 방법을 보여줍니다.
템플릿 설정
Mustache 템플릿의 설정을 변경하여 구분자를 사용하거나 템플릿 태그를 커스터마이징할 수 있습니다.
// 구분자 설정
Mustache.tags = ['<%', '%>'];
var template = '<div>Hello, <%name%>!</div>';
// 템플릿 적용
var data = { name: 'World' };
var rendered = $(Mustache.render(template, data));
$('#container').html(rendered);
위 코드에서는 Mustache 템플릿의 구분자를 <%와 %>로 설정한 후, 해당 구분자를 사용하여 템플릿을 구성하는 방법을 보여줍니다.
결론
jQuery를 사용하여 Mustache 템플릿 엔진을 활용하는 방법에 대해 알아보았습니다. 이를 통해 동적인 화면을 쉽게 구현할 수 있으며, 반복문과 조건문을 템플릿에 효과적으로 적용할 수 있습니다.