리터럴 템플릿

리터럴 템플릿

템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `를 사용한다.

사용법

Dom을 일일히 생성하지않고 가독성을 높이고 처리를 원활히 한다.
주의 : innerHTML로 사용해야한다. innerText나 textContext는 불가능

1. 값으로 사용하기

const $app = document.querySelector('#app');

 const  b  = `<ul class="nav-items">
  <li><a href="#home">ome</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>`;

const appRender1 = () => {
  $app.innerHTML = b;
 }

 appRender1();

2. 함수로 사용하기

좀 더 다양하게 매개변수도 처리할 수 있고 유동적이다.

const $app = document.querySelector('#app');

const a = (val)=>`<ul class="nav-items">
  <li><a href="#home">Home</a></li>
  <li><a href="#news" id=${val}>News</a></li>
  <li><a href="#contact">${val}</a></li>
  <li><a href="#about">About</a></li>
</ul>`;

const appRender = () => {
  $app.innerHTML = a('money');
 }

 appRender()

블랙커피스터디에 적용시키기

기존코드

    //태그들과 class 속성 부여 후 연결
    let li = document.createElement('li');
    let div = document.createElement('div');
    let input = document.createElement('input');
    let button = document.createElement('button');
    let label = document.createElement('label');

    li.append(div);
    div.append(input);
    div.append(label);
    div.append(button);

    li.classList.add('active')
    div.classList.add('view');
    input.classList.add('toggle');
    input.setAttribute('type', 'checkbox');
    label.classList.add(`label`);
    button.classList.add(`destroy`);

    //입력 값을 label에 추가 및 버튼에 X 추가
    label.innerText = value;

......

 button.addEventListener('click', function (event) {
        event.target.closest('li').remove();
        document.querySelector('.todo-count > strong').innerText = --count;
        localStorage.removeItem(label.innerText);
    })

......
    document.querySelector('.todo-list').insertAdjacentElement("beforeend", li);

리터럴 사용한 코드

 const $todo_list = document.querySelector('.todo-list');
    const content = (value)=>`
        <li class="active"> 
            <div class="view">
                <input class="toggle" type="checkbox">
                <label class="label">${value}</label>            
                <button class="destroy"></button>    
            </div>
        </li>
    `
    $todo_list.innerHTML += content(value);

....


    document.querySelectorAll('.destroy').forEach($el => $el.addEventListener('click', function (event) {
        event.target.closest('li').remove();
        document.querySelector('.todo-count > strong').innerText = --count;
        localStorage.removeItem(event.target.closest('div').children[1].innerText);
    }))

가독성은 좋아진다. 이때 주의할 점은 과거에는 Dom을 사용하여 button.addEventListener를 사용했지만 리터럴에서는 button Dom을 사용하지 않으므로 document.querySelectorAll('.클래스이름').forEach($el => $el.addEventListener('click', function (event) {....})) 형태로 모든 해당 내용에 클릭시 진행하는 이벤트를 넣어준다.