mustache.js 사용하기

무엇을 공부하든 공식 문서를 참고하는게 가장 좋다고 생각하는데, 아무래도 공식 문서들은 영어로 되어있기 때문에 한글로 된 포스트를 먼저 보는 편이다. 그러나...! 왜...! 내가 똑같이 따라하면 안되는걸까...그래서 결국 공식 문서를 참조하게 되는...

mustache 사용법은 간단하다.

 

나는 테이블의 <tr>태그를 반복하기 위해 템플릿을 사용했다. 원래는 literal template를 써서 리스트로 되어있는 데이터를 반복을 돌리고 데이터 하나당 insertAdjacentHTML() 함수를 사용했다. 그러나....너무너무 비효율적이다...그래서 생각해 본 방법이 하나씩 넣지 말고, <tr>들을 다 모아서 한번에 innerHTML로 사용하자! 였지만...이것도 역시나 반복을 돌린다는 것은 변함이 없었다..

 

그러다 알게 된 mustache.js ! mustache는 java 쪽 템플릿 엔진인 줄만 알았는데, 많은 언어를 지원하고 있었다.

 

1️⃣ template 작성

- id 부여

- type 에 x-tmpl-mustache 선언

- "{{}}"를 사용하여 파싱할 데이터의 이름을 넣어준다.

- 리스트로 된 데이터를 파싱하기 위해서 키값으로 감싸준다. 예) {{#users}}

//데이터 예시
let users = [{userId:1, userName: "injeong", userPhone: "01012345678"}
            ,{userId:2, userName: "injeong", userPhone: "01012345678"}
            ,{userId:3, userName: "injeong", userPhone: "01012345678"}]

//template 작성
<script id="trTemplate" type="x-tmpl-mustache">
 {{#users}}
    <tr class= "trs"
        data-user-id="{{userId}}"
     >
        <td>{{index}}</td>
        <td>{{userName}}</td>
        <td>{{userPhone}}</td>
    </tr>
  {{/users}}
</script>
//자신이 다운받은 mustache.js 파일경로로 바꿔준다
<script src="/js/lib/mustache.min.js"></script>

2️⃣  template parsing  

- user당 번호를 넣어주기 위해서 함수를 사용했다. 자체적으로 내부에서 반복을 돌면서 index값을 증가 시켜 준다.

- 위의 template에서 users와 index라는 이름으로 데이터에 접근 할 수 있다.

- 렌더링 된 템플릿을 innerHTML을 사용하여 넣어준다.

async function retrieveUser(users) {
    let index = 1;
    //템플릿 찾기
    let template = document.getElementById("trTemplate").innerHTML; 
    //템플릿 파싱
    Mustache.parse(template);
    //렌더링 할 템플릿과 데이터를 넣어준다.
    let rendered = Mustache.render(template, 
    	{ users : users , 
          index : function(){
        		   return index++;
        		}
        });
    //템플릿을 넣어준다
    document.getElementById("userTableBody").innerHTML = rendered;
}

 

⬇️ 공식 문서 참고하기

https://github.com/janl/mustache.js

GitHub - janl/mustache.js: Minimal templating with {{mustaches}} in JavaScript