템플릿 리터럴(Template Literal)은 단순히 문자열을 조합하는 기능을 넘어, 태그드 템플릿 리터럴(Tagged Template Literal)이라는 강력한 문법도 제공합니다. 태그드 템플릿 리터럴은 함수를 정의하듯 템플릿 문자열을 직접 파싱할 수 있게 해주는 기능으로, 문자열 처리 로직을 자유롭게 커스터마이징할 때 매우 유용합니다.
태그드 템플릿 리터럴의 동작 원리
일반적인 함수 호출과 달리, 태그드 템플릿 리터럴은 괄호( ) 없이 함수 이름을 템플릿 문자열 바로 앞에 붙여 호출합니다. 이때 태그 함수는 다음과 같은 인자를 전달받습니다.
- 첫 번째 인자: 템플릿 문자열을 ${} 삽입식 기준으로 나눈 문자열 배열
- 나머지 인자: ${} 안에 삽입된 값들이 순서대로 각각의 매개변수에 전달됨
즉, 태그 함수는 문자열 조각들과 동적 값들을 분리해서 받기 때문에, 개발자가 원하는 방식으로 결과를 가공해 반환할 수 있습니다.
예제 코드
다음은 JavaScript에서 태그드 템플릿 리터럴을 구현한 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>JavaScript 태그드 템플릿 리터럴</h1>
<div class="result"></div>
<br />
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 태그드 템플릿 리터럴로 template 문자열이 sampleTag() 함수에 전달됩니다</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
function sampleTag(strings, name, age, rollNo) {
let section;
if (rollNo > 50) {
section = "A";
} else {
section = "B";
}
return `${name} roll no: ${rollNo} age :${age} is in section ${section}`;
}
let name = "Rohan",
age = 16,
rollNo = 22;
BtnEle.addEventListener("click", () => {
resEle.innerHTML = sampleTag`${name} aged ${age} and roll no ${rollNo} is new in
the school`;
});
</script>
</body>
</html>실행 결과
코드를 실행하면 아래와 같은 화면이 나타납니다.
'클릭하세요' 버튼을 누르면 sampleTag() 함수가 호출되고, 태그 함수가 받은 값들을 기반으로 학생 정보가 가공되어 출력됩니다.
정리
태그드 템플릿 리터럴은 문자열 배열과 삽입 값을 분리하여 전달받기 때문에, HTML 이스케이프 처리, 다국어 변환(i18n), 스타일드 컴포넌트(styled-components)처럼 문자열을 특별하게 해석해야 하는 라이브러리에서 널리 활용됩니다. 일반 템플릿 리터럴 사용법에 익숙해졌다면, 이 태그 기능까지 익혀두면 문자열 처리의 폭을 크게 넓힐 수 있습니다.