태그가 지정된 템플릿 문자열 (Tagged Template Literals)

• Styled component 사용 예시

const Wrapper = styled.div``;

• template literal 을 사용하여, 함수의 인자를 파싱하여 넘겨주는 것

const foo = 'foo';
const bar = 'bar';

function Test(string, arg1, arg2){
	return string[0] + string[3] + arg1 + arg2;
}

Test`Hello ${foo} ${bar} is my name`;
	// 실행 결과 'Hello  is my name foobar'

와이..?😯

Test 함수의 파라미터들을 찍어보면 아래와 같다.

string : 'Hello ', ' ', ' is my name' ]

arg1: "foo";

arg2 : "var"

대박신기함..
이렇게하면 템플릿 리터럴 값들 요리조리 파싱 가능함!
styled component 도 그렇게 한거구나!