JS - Tagged Template Literal
1. Tagged Template Literal?
React.js
로 styled component
를 만들어서 쓸 때가 있다.
예를 들면
const Div = styled.div`
width: 100px;
heigth: 100px;
background-color: red;
`;
이런 식으로 말이다.
특이한것은 backtick
은 문자열내에 변수 같은 것을 쓰고 싶을 때 사용하곤 했는데
위처럼 이상한 표현이 뭔가 생소하고 저게 뭔가 싶다.
그러다가 Tagged Template Literal
이란 것을 알게되었다.
2. Tagged Template Literal 사용법
function f(text, ...values) {
console.log(text);
console.log(values);
}
const name = '햄토리';
f`내 이름은 ${name} 입니다.` // ["내 이름은 ", " 입니다."]
// ["햄토리"]
위와 같이 표현할 수 있는데
함수 f에 Template Literal
의 내용을 인자로 전달한다.
text에 문자열에서 ${name}을 기준으로 split
해서 배열로 전달하고,
...values에는 Template Literal
안에서 사용된 ${}값들이 배열로 전달된다.
아마 이 문법을 사용해서 styled component
를 만든거 같은데
구조를 보면 reduce
도 사용하는거 같고 꽤 복잡해보인다.
Author And Source
이 문제에 관하여(JS - Tagged Template Literal), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@hemtory/JSTaggedTemplateLiteral
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
React.js
로 styled component
를 만들어서 쓸 때가 있다.
예를 들면
const Div = styled.div`
width: 100px;
heigth: 100px;
background-color: red;
`;
이런 식으로 말이다.
특이한것은 backtick
은 문자열내에 변수 같은 것을 쓰고 싶을 때 사용하곤 했는데
위처럼 이상한 표현이 뭔가 생소하고 저게 뭔가 싶다.
그러다가 Tagged Template Literal
이란 것을 알게되었다.
function f(text, ...values) { console.log(text); console.log(values); } const name = '햄토리'; f`내 이름은 ${name} 입니다.` // ["내 이름은 ", " 입니다."] // ["햄토리"]
위와 같이 표현할 수 있는데
함수 f에Template Literal
의 내용을 인자로 전달한다.
text에 문자열에서 ${name}을 기준으로split
해서 배열로 전달하고,
...values에는Template Literal
안에서 사용된 ${}값들이 배열로 전달된다.
아마 이 문법을 사용해서styled component
를 만든거 같은데
구조를 보면reduce
도 사용하는거 같고 꽤 복잡해보인다.
Author And Source
이 문제에 관하여(JS - Tagged Template Literal), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hemtory/JSTaggedTemplateLiteral저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)