템플릿 리터럴 (Template literals) 이란?

문득 React의 Styled-Components와 Emotion 등 스타일 라이브러리를 공부하다가, 템플릿 리터럴이라는 용어에 대한 의문이 들었다.

뭔가 문법에서 자연스레 쓰고 있었던 것 같은데.. 이게 대체 무엇일까?

 

MDN Web Docs에 따르면 아래 내용에 명시가 되어있다. 

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다.
이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다.

    `string text`

    `string text line 1
     string text line 2`

    `string text ${expression} string text`

    tag `string text ${expression} string text`

평소 변수와 문자열을 함께 넣을 때 사용하던 백틱과 함께 혼용한 표현식이 템플릿 리터럴이였다.

자주 쓰던 표현식도 용어를 알면 이렇게 신기하다, 기록을 해놓아야 머리 속에 들어오니까 용어 정리도 틈틈히 해놔야겠다.

분명 템플릿 리터럴은 유용하게 쓰이고, 자바스크립트를 통한 라이브러리라면 분명 자주 쓰인다.

템플릿 리터럴은 꼭 알고 넘어가자!