1. Tagged Template Literal?

React.js로 styled component를 만들어서 쓸 때가 있다.
예를 들면

const Div = styled.div`
  width: 100px;
  heigth: 100px;
  background-color: red;
`;

이런 식으로 말이다.
특이한것은 backtick은 문자열내에 변수 같은 것을 쓰고 싶을 때 사용하곤 했는데
위처럼 이상한 표현이 뭔가 생소하고 저게 뭔가 싶다.
그러다가 Tagged Template Literal이란 것을 알게되었다.

2. Tagged Template Literal 사용법

function f(text, ...values) {
  console.log(text);
  console.log(values);
}

const name = '햄토리';

f`내 이름은 ${name} 입니다.`		// ["내 이름은 ", " 입니다."]
					// ["햄토리"]

위와 같이 표현할 수 있는데
함수 f에 Template Literal의 내용을 인자로 전달한다.
text에 문자열에서 ${name}을 기준으로 split해서 배열로 전달하고,
...values에는 Template Literal안에서 사용된 ${}값들이 배열로 전달된다.
아마 이 문법을 사용해서 styled component를 만든거 같은데
구조를 보면 reduce도 사용하는거 같고 꽤 복잡해보인다.