Tagged Template Literal

📌 Template Literal 과 Tagged Template Literal

ES6가 많이 사용되며 템플릿 문자열은 많이 쓰고있다. 하지만 태그가 붙어있는 템플릿 리터럴은 거의 사용해보지 않았을 것이다. 단, styled-components를 사용해 봤다면 자기도 모르게 사용해 봤을 것이다.

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

위 코드에서 h1은 태그가 아니라 메서드이다. 보통 태그 함수라고 부른다.

Tagged Template Literal의 사용 방법

-Template literal

const name = 'Kim';
const helloMsg = `hello ${name}`;
console.log(helloMsg); // hello Kim

const obj = { a: 1 };
const msg = `${obj}`;
console.log(msg); // [object Object]

const foo = () => 1;
const msg2 = `${foo}`;
console.log(msg2); // () => 1

템플릿 리터럴을 사용하면서 ${ } 안에 넣어 준 자바스크립트 값을 조회하고 싶으면 Tagged 템플릿 리터럴을 사용하자.

-Tagged Template literal

const food1 = '피자';
const food2 = '치킨';

const foodMsg = (texts, ...values) => {
	console.log(texts);
	console.log(values);
};
foodMsg`제가 어제 먹은 음식은 ${food1}그리고 ${food2}입니다.`;
// [ '제가 어제 먹은 음식은 ', '그리고 ', '입니다.' ]
// [ '피자', '치킨' ]

함수 첫번째 인자 texts에는 [ '제가 어제 먹은 음식은 ', '그리고 ', '입니다.' ] 가 들어가 있는게 보이고
두번째 인자 values에는 ${ }안에 있는 [ '피자', '치킨' ] 이 들어가 있다.
이러한 성질을 이용하면 Tagged Template Literal을 이런 방식으로 응용을 할 수 있다.

const food1 = '피자';
const food2 = '치킨';
const foodMsg = (texts, ...values) => {
	return texts.reduce(
		(acc, cur, i) => `${acc}${cur}${values[i] ? `<b>${values[i]}</b>` : ''}`,
		'',
	);
};

console.log(foodMsg`제가 어제 먹은 음식은 ${food1}그리고 ${food2}입니다.`);
//제가 어제 먹은 음식은 <b>피자</b>그리고 <b>치킨</b>입니다.

위와 같이 Tagged Template Literal을 잘 사용하면 스마트한 문자열을 만들 수 있다.
현재는 React styled-components에서만 사용을 해봤지만 더 다양한 용도로 사용을 해봐야겠다.