Tagged Template 기능

// (1) 보통 일반적인 방법
const userName = 'kim heetae';
const bolder = text => `<b>${text}</b>`;

console.log(`Hi~ ${userName}`);
console.log(`Hi~ ${bolder(userName)}`);

// (2) Tagged Template

// strings : ${} 를 기준으로 생성한 문자열의 배열이다. 예를들면 split(${})
// ...fns : ${} 의 요소들을 말한다.
function div(strings, ...fns) { // (문자열 배열, 배열의 ${}배열요소들)
  const flat = s => s.split('\\n').join('');

  return function (props) {
    return `<div style="${flat(strings[0]) + (fns[0] && fns[0](props)) + flat(strings[1])}"></div>`;
  }
}

const Div = div` 
  font-size: 20px;
  color: ${props => props.active ? 'white' : 'gray'};
  border: none;
`; // div() 함수의 반환 값을 Div에 할당

console.log(Div({ active: true }));