보통 웹에서는 (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안에 데이터를 보여줄 때는 위와 같이 ${}안에 데이터를 넣어주면 된다.
템플릿을 위와 같이 사용하기는 불편하기 때문에 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;
});