STRINGS - HTML Fragments

출처 : Nomadcoders ES6의 정석

Template literal은 문자열에 표현식을 넣을 수 있다는것 말고도 장점이 있다.

javascript안에서도 html을 작성하여 사용할 수 있게 해준다.

js를 사용해 html를 추가해줘야하는 상황을 가정해보자.
html에는 wrapper이라는 클래스명을 가진 div태그 하나만 작성하였다.

우선 기존과 같은 방식으로는 어떻게 작성했는지 보자.

const wrapper = document.querySelector('.wrapper');

const addWelcome = () =>{
  	// element 생성
	const div = document.createElement("div");
    const h1 = document.createElement("h1");
  	
  	//생성된 elemt에 값 클래스 지정
  	h1.innerText = "Hello";
  	h1.className = "someData";
  
  	//부모 element에 추가
    div.append(h1)
  	wrapper.append(div)
}

우리는 두 개의 요소를 추가하기 위해 위 코드와 같이 작성했어야 했다. 그렇다면 만약 우리가 굉장히 많은 수의 요소를 추가해야한다면 혹은 더욱 복잡한 구조를 만들어야 한다면 어떻게 될까?
굉장히 많은 코드를 작성해야만 될것이다. 일일이 구조를 다 생각해가면서 말이다.

여기서 우리는 template literal의 도움을 받을 수 있다.

const wrapper = document.querySelector('.wrapper');

const addWelcome = () =>{
  	const hello = "hello";
  	// element 생성
	const div = `
	<div class="hello">
		<h1>${hello}</h1>
	</div>
	`
  	wrapper.innerHTML = div
}

addWelcome()

이전 소스와 비교했을때 굉장히 단축되고, HTML의 구조를 일일이 고려하며 작성하지 않아도 된다.
그리고 예시에서 보듯이 template literal을 멀티라인을 지원한다.

기존 우리는 '와 "를 사용했을때 멀티라인을 지원하지 않았다. 그렇기 때문에 만약 위와 같은 HTML코드를 작성하더라도 단일라인으로 작성하여야 추가하여야 했고, 가독성이 매우 떨어졌다.

// 일반 문자열
const div = '<div class="hello"><h1>'+hello+'</h1></div>'
	
//template literal
const div = `
	<div class="hello">
		<h1>${hello}</h1>
	</div>
	`

template literal은 멀티라인을 지원해줌으로써, js상에서 html을 작성해야할때, 우리에게 굉장히 큰 도움을 준다.