[javascript] 태그 템플릿 리터럴(Tagged template literal)

 

리액트에서 styled component 만드는 문법에 사용되는 태그 템플릿 리터럴 입니다.

 

1. 사용법

//React의 styled component 만들 때 사용하는 형태
const Title = styled.div`
  font-size: 1px;
  color: black;
`;

 

태그 함수 : 함수 뒤에 템플릿 리터럴( ` ` )을 붙여서 사용하게 됩니다.

const name = 'ohda';
const age = 100;

//태그 함수
const tag = (string, ...vars) => console.log(string, vars, string.raw);
tag`hello ${name} age is ${age}`;

//결과 : [ 'hello ', ' age is ', '' ] [ 'ohda', 100 ] [ 'hello ', ' age is ', '' ]

 

결과를 통해 태그 함수는

첫 번째 인자로 문자열 배열을, 두 번째 인자로 ${ } 그룹의 변수 배열을 반환하는 것을 확인할 수 있습니다.