Template literal ‘backtick’

보통 string을 표현하기위해 “”와 +을사용하여 string을 표현하였다. 그리고 이러한 불편함을 해소하기위해서 template literal이 나왔고 `백틱```을 사용하여 string을 더욱 간결하고 깔끔하게 표현할 수 있다.

/**
 * @description `"Hello " + aName`이걸 template literals라고 부른다.
 * string form 앞뒤로 백틱``을 붙혀 쓰여진 모든 문자를 string으로 변환해준다.
 */
const sayHi = (aName = "anon") => `Hello ${aName} lovely to have you`;
// `"Hello " + aName + " lovely to have you"`;
console.log(sayHi());

백틱 안의 ${}은 string안에 변수값을 넣기위해 사용한다. 일반적인 operation(+ - * /)부터 함수까지 사용가능 하지만 함수를 직접적으로 넣어서 사용할 순 없다.

추가로 백틱은 큰따옴표””와 작따옴표’’와 다르게 줄바꿈 지원도 된다.

HTML Fragments

ES6에서 왜 백틱이 나오는 이유는 modern JS로 HTML을 작성했을때 다양한 함수를 가지고 tag, attributes, style등을 추가했었는데 백틱만으로 HTML form을 그대로 작성하기만하면 html이 작성되기 때문에 편리함과 속도를 위해서 나왔다.

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

/**
 * template literal이 없었던 ES6이전에는 html에 elements를 추가할때 아래와 같이 작성하였따.
 */
const addWelcome1 = () => {
  const div = document.createElement("div");
  const h1 = document.createElement("h1");
  h1.innerText = "Hello1";
  h1.className = "sexyTitle";
  div.append(h1);
  wrapper.append(div);
};

setTimeout(addWelcome1, 1000);

/**
 * 백틱으로 html tag를 작성하고 넣기만하면 JS함수로 해줘야 했던 작업을 간단하게 건너뛸 수 있게 되었다.
 */
const addWelcome2 = () => {
  const div = `
  <div class="hello">
    <h1 class="title">Hello2</h1>
  </div>
  `;
  wrapper.innerHTML = div;
};
setTimeout(addWelcome2, 2000);

한가지 예로 백틱만으로 아래와 같이 여러 데이터를 생성해야하는 HTML form을 손쉽게 생성하는걸 볼 수 있다.

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

/**
 * 한가지 예제로 아래와 같이 array value를 백틱을 이용하여 손쉽게 HTML form을 작성할 수 있다.
 * reactJS의 JSX도 백틱에서 파생된 syntax라는걸 알 수 있다.
 */
const friends = ["me", "lynn", "dal", "mark"];

const list = `
        <h1>People i love</h1>
        <ul>
            ${friends.map((friend) => `<li>${friend}</li>`).join("")}
        </ul>
`;

wrapper.innerHTML = list;

Cloning Styled Components

Styled components는 reactJS을 위한 라이브러리, 팻킷같은 것이다. css를 JS에 사용할 수 있게 해주고 html을 얻을 수 있다.

const styled1 = (css) => console.log(css);

/**
 * template literal의 또 다른 기능은 함수이름 앞에 백틱을 써주어서
 * 인자로 바로 전달하게 하는 기능이다. 다른말로 백틱은 ()로도 표현이 되는 것이다.
 */
styled1`border-radius:10px;
color:blue`;

/**
 * thml tag 이름을 전달하여 html tag를 생성할 수 있지만
 * 바로 이어서 백틱으로 css스타일을 넣게 된다면 에러가 발생한다.
 * 스타일도 추가로 넣기위해 내부함수를 추가해줘야 한다.
 * @example
 * const title = styled2("h2")`color:red`;
 * // const title = styled2("h2")("color:red");
 * @param {htmlTag} aElement htmlTag 이름을 넣는다.
 * @returns htmlTag가 생성된다.
 */
const styled2 = (aElement) => {
  const el = document.createElement(aElement);
  return el;
};
const title2 = styled2("h1");
console.log(title2);

/**
 * 함수의 함수를 사용하는 방법은 아래와 같이 하면 위와 같은 에러를 해결할 수 있다.
 * 그리고 함수의 정의를보면 함수의 반환값이 함수이고 그 반환된 함수로 백틱인자가
 * 전달되는 것이다.
 * 이것이 react가 작동하는 방식이다.
 */
const styled3 = (aElement) => {
  const el = document.createElement(aElement);
  return (args) => {
    const styles = args[0];
    el.style = styles;
    return el;
  };
};
const title3 = styled3("h1")`
background-color : red;
color:blue;`;
const subTitle = styled3("span")`
color:teal;
`;

title3.innerText = `We just cloned`;
subTitle.innerText = `Styled Components`;
document.body.append(title3, subTitle);