[React] Tagged 템플릿 리터럴

앞서 작성한 코드를 확인해 보면, 스타일을 작성할 때 `을 사용해 만든 문자열에 스타일 정보를 넣어줌. 이러한 문법을 Tagged 템플릿 리터럴이라고 함.

❓🤔 CSS Module을 배울 때 나온 일반 템플릿 리터럴과 다른 점은?
👉 템플릿 안에 자바스크립트 객체나 함수를 전달할 때 온전히 추출할 수 있음.

• 예제

`hello ${{foo: 'bar' }} ${() => 'world'}!`
// 결과: "hello [object Object] () => 'world'!"

템플릿에 객체를 넣거나 함수를 넣으면 형태를 잃어 버리게 됨. 객체는 "[object Object]"로 변환되고, 함수는 함수 내용이 그대로 문자열화되어 나타남.

만약 다음과 같은 함수를 작성하고 나서 해당 함수 뒤에 템플릿 리터럴을 넣어 준다면??

function tagged(...args) {
console.log(args);
}
tagged`hello ${{foo: 'bar' }} ${() => 'world'}!`

템플릿 안에 넣은 값을 온전히 추출할 수 있음!

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