[jQuery] Template 다루기 (x-jquery-tmpl)

1. 기본 문법

<!-- 이거 type 틀리면 동작 안함! -->
<script id="myTemplate" type="text/x-jquery-tmpl">
    <tr>
        <td>\${name}</td>
        <td>\${age}</td>
        <!-- if문은 이렇게 -->
        {{if gender === 'M'}}
            <td>남자</td>
        {{else}}
            <td>여자</td>
        {{/if}}
        
        <!-- each문 -->
        {{each hobbies}}
            <span>\${$value}</span>
        {{/each}}
        
        <!-- hidden값은 요렇게 -->
        <input type="hidden" value="\${id}" />
    </tr>
</script>

 

 

 

2. 실수했던 것들

1. empty() 안하고 append 했다가 데이터 쌓임...

// ❌ 잘못된 방법
$("#dataList").append($("#myTemplate").tmpl(data));

// ⭕ 올바른 방법
$("#dataList").empty();  // 먼저 비우고
$("#myTemplate").tmpl(data).appendTo("#dataList");

 

 

 

2. 변수명 오타

<!-- 데이터: {userName: "홍길동"} -->

<!-- ❌ 틀린 방법 -->
<div>\${name}</div>  <!-- 안나옴 -->

<!-- ⭕ 맞는 방법 -->
<div>\${userName}</div>

 

 

 

3. 조건문에서 실수

<!-- ❌ 이렇게 하면 안됨 -->
{{if status == "Y"}}  // 작은따옴표로 해야함

<!-- ⭕ 이렇게 해야함 -->
{{if status === 'Y'}}

 

 

 

4. null 체크 깜빡함

<!-- ❌ 문제있는 코드 -->
<td>\${obj.value}</td>  <!-- obj가 null이면 에러 -->

<!-- ⭕ 안전한 코드 -->
<td>{{if obj}}\${obj.value}{{/if}}</td>

<!-- 🎯 더 나은 방법 -->
<td>\${obj ? obj.value : '-'}</td>

 

 

 

3. 자주 쓰는 패턴들

1) 날짜 포맷팅

// 데이터 가공을 미리 해두자
const data = rawData.map(item => ({
    ...item,
    // 가공한 데이터는 새로운 키로
    createdDt: moment(item.createdAt).format('YYYY-MM-DD')
}));

<!-- 템플릿에선 깔끔하게 -->
<td>\${createdDt}</td>

 

 

2) 금액 포맷팅

// 이것도 미리 가공
const data = rawData.map(item => ({
    ...item,
    // 콤마 추가
    amountFmt: item.amount?.toLocaleString() || '0'
}));

<!-- 템플릿에선 바로 사용 -->
<td>\${amountFmt}</td>

 

 

3) 빈값 처리

<!-- 자주 쓰는 패턴 -->
<td>\${memo || '-'}</td>
<td>{{if status === 'Y'}}정상{{else}}-{{/if}}</td>

 

 

 

✅ 메모

 

• template 태그에서 if문 쓸 때는 === 쓰기 (== 쓰면 가끔 이상하게 동작)
• empty()는 습관적으로 하기
• 데이터 가공은 템플릿 바깥에서 하기 (템플릿 안에서 하면 나중에 수정 힘듦)
• 실무에서는 빈값 처리가 생각보다 중요!