tagged templates

📌 template literals

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다.

특징

• ` 백틱이라는 기호를 사용한다.
• ${}를 사용하여 표현식을 삽입할 수 있다.
• 개행을 포함한다.

tagged templates

템플릿 리터럴의 발전된 형태로 태그드 템플릿이 있다.

마치 함수처럼 사용할 수 있다.

예제 1

const virtualNode = {
  name: "figure",
  className: "tagged-template-literals",
  style: { cssText: "" },
};

const styled = (strings, Node, ...value) => {
  const el = strings
    .slice(1, 3)
    .reduce((acc, cur) => acc + cur.trim(), "")
    .split(";");

  el.forEach((elem, i) => {
    Node.style.cssText += elem + value[i] + ";";
  });
  return Node;
};

let values = {
  margin: "10px",
  color: "#d08471",
};

const received = styled`${virtualNode}margin: ${values.margin};color: ${values.color};`;

console.log(received);

• 마치 함수처럼 인수를 받아서 템플릿 리터럴에 넣어 반환값을 원하는 대로 지정해줄 수 있다.
• 리액트의 StyledComponent가 태그드 템플릿을 활용하여 탄생하게 되었다.

🏓 소감

문자타입과 다른 타입을 파라미터로 사용하는 함수를 만들 때 원하는 반환값을 직관적으로 사용할 수 있어 용이해보인다.