해당 코드의 결과를 직접 확인하고 싶다면 크롬 브라우저의 개발자 콘솔을 열어서 자바스크립트 콘솔에 위 코드를 붙여 넣어 보세요. 그러면 다음과 같은 결과가 나타날 것입니다.

▲ 그림 9-9 Tagged 템플릿 리터럴

 

Tagged 템플릿 리터럴을 사용하면 이렇게 템플릿 사이사이에 들어가는 자바스크립트 객체나 함수의 원본 값을 그대로 추출할 수 있습니다. styled-components는 이러한 속성을 사용하여 styled-components로 만든 컴포넌트의 props를 스타일 쪽에서 쉽게 조회할 수 있도록 해 줍니다.