[JavaScript] Template

Junseo Kim·2020년 8월 3일
0

Template

보통 웹에서는 (1)json으로 응답을 받고 (2)javascript object로 변환한 후 (3)어떠한 데이터조작을 하고 (4)dom에 추가하여 데이터 + HTML을 합쳐서 보여주는 일이 자주 일어난다.

이런 DOM 조작 작업을 템플릿이라고 한다.

const data = [
  {
    name : 'junseo',
    age : 25,
    hobby : ['basketball', 'computer']
  },
  {
    name : 'lee',
    age : 28
  }
];

const template = `<div>Hello! ${data[0].name}</div>
                  <div>${data[0].hobby}</div>`;
                    
console.log(template); // "<div>Hello! junseo</div>
         		   <div>basketball,computer</div>"

이 때 ` 는 엔터키 옆에 있는 홑 따옴표가 아니라 느낌표 왼 편에 있는 문자이다.

HTML안에 데이터를 보여줄 때는 위와 같이 ${}안에 데이터를 넣어주면 된다.

Tagged Template Literals

템플릿을 위와 같이 사용하기는 불편하기 때문에 function에서 어떠한 처리를 한 다음에 결과값을 반환하여 사용한다.

const data = [
  {
    name : 'junseo',
    age : 25,
    hobby : ['basketball', 'computer']
  },
  {
    name : 'lee',
    age : 28
  }
];

function fn(tags, name, hobbies) {
    console.log(tags); // ["<div> Hello! ", "</div> <div>", "</div>"] (이런식으로 배열로 들어옴)
    
    if(typeof hobbies === 'undefined') {
        hobbies = '취미가 없습니다';
    }
    
    return (tags[0] + name + tags[1] + hobbies + tags[2]);
}

const template = fn`<div>Hello! ${data[0].name}</div>
                  <div>${data[0].hobby}</div>`;
                  
console.log(template); // "<div>Hello! junseo</div>
         		   <div>basketball,computer</div>"

함수를 만들어 사용하려면 만들어 준 함수이름을 template 앞에 붙여준다. 그러면 template이 조각나서 배열로 함수에 전달되게 된다. tags 뒤의 파라미터들은 const template에 나타나있는 순서로 전달된다.

함수를 만들어 사용하면 위와 같이 조건문을 사용하는 것과 같이 응용하여 사용 할 수 있는 장점이 있다.

반복문을 사용한 예제

const data = [
  {
    name : 'junseo',
    age : 25,
    hobby : ['basketball', 'computer']
  },
  {
    name : 'lee',
    age : 28
  }
];

function fn(tags, name, hobbies) {    
    if(typeof hobbies === 'undefined') {
        hobbies = '취미가 없습니다';
    }
    
    return (tags[0] + name + tags[1] + hobbies + tags[2]);
}

data.forEach((v) => {
  let template = fn`<div>Hello! ${v.name}</div>
                  <div>${v.hobby}</div>`;
  
  document.querySelector('#board').innerHTML += template;
});

0개의 댓글