react의 styled components에 대해 공부하며 굉장히 낯선 문법을 보았는데
이미 있던 문법이라는 것,, 아닌가..! template literal은 많이 쓰는 문법이니까 당연히 알았는데 요건 처음 들어봤다.
However, a tagged template literal may not result in a string; it can be used with a custom tag function to perform whatever operations you want on the different parts of the template literal.
Template literals (Template strings) - JavaScript | MDN
Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.
developer.mozilla.org
근데 꽤 낯설고 어려워서
https://www.youtube.com/watch?v=4oVJVglLLns
해당 영상을 참고했다.
tagged function의 첫번째 인자는 ${}를 제외한 모든 string, 두번째 인자는 ${}에 포함된 string의 배열을 받는다고 미리 정의된 부분이 흥미로웠다.
해당 function을 통해 template literal을 받아서 자유롭게 편집해서 사용할 수 있다.
-> styled-components는 요런 장점을 활용해서 동적으로 prop을 활용할 수 있다.
'TIL' 카테고리의 다른 글
| 2922.11.21 (0) | 2022.11.21 |
|---|---|
| http redirect (0) | 2022.11.03 |
| 변수 이름은 매우 중요했다 (0) | 2022.09.28 |
| 디바운싱과 데코레이터 (0) | 2022.09.09 |
| 22.08.02 (0) | 2022.08.03 |