Tagged Template Literal

styled-components의 `` ?

const StyleComponents = styled.div`
color : ${(props) => props.color};

styled-components를 사용하다보면... 숨쉬듯이 작성하는 코드들이다.
그런데 여기서, StyleComponents에 props로 전달한 값들을 어떻게 사용할 수 있는 걸까?

 

Tagged Template Literal

우선 Template Literal이란?
→ 내장된 표현식을 허용하는 문자열 리터럴!
$와 중괄호( $ {expression} )를 통해 표현식을 넣을 수도 있다.

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and

이 때 ${} 안에 객체 or 함수를 넣는다면?

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

const fn = () => true
const msg = `${fn}`;
console.log(msg);
// "() => true"

만약 Template Literal 을 사용하면서도, 그 내부에 넣은 자바스크립트 값을 조회하고 싶다면?
→ Tagged Template Literal 문법을 사용 할 수 있다!

const red = '빨간색';
const blue = '파란색';
function favoriteColors(texts, ...values) {
  console.log(texts);
  console.log(values);
}
favoriteColors`제가 좋아하는 색은 ${red}과 ${blue}입니다.`

// (1) ["제가 좋아하는 색은", "과", "입니다", raw: Array(3)]
// (2) ["빨간색", "파란색"]

 

일반적인 함수 호출 방법( () )이 아닌, ``을 통해 사용한 모습!
(styled-components에서 많이 본 형태일테다)

Tagged Template Literal을 통해 함수 호출 시
문자열은 첫번째 파라미터로, 변수 값들은 각각의 값이 대입된 채로 넘어가게 된다.
이를 함수 내에서 나머지 매개변수(rest)문법을 사용해 분리해줄 수 있는 것!

이를 통해... 
타입에 상관없이 Function, Number, string, Object 등을 전달하고, 이를 실행할 수 있을테다! 와!

---

아하! 즉 맨 처음에 봤던 styled-components는...

const StyleComponents = styled.div`
	color : ${(props) => props.color};   
`

 

Tagged Template Literal를 통해 
문자열("color")과 ${}로 넘겨준 함수((props)=>props.color)를 전달해 이를 분리한 후, 
해당 함수를 사용해준 것 뿐!