템플릿 리터럴은 ES6에서 도입된 자바스크립트의 기능입니다. 이는 문자열 작업 시 보다 유연하고 유지 관리가 쉽도록 도와줍니다.
이 포스트에서는 템플릿 리터럴을 사용하는 방법, 구문, 이점 및 사용 사례를 알아보겠습니다.
또한 태그가 지정된 템플릿 리터럴(tagged template literals)이라는 강력한 기능에 대해서도 알아보겠습니다.
Table of Contents
템플릿 리터럴 이란?
템플릿 리터럴은 문자열 작업을 편리하게 수행할 수 있게 해주는 자바스크립트의 기능입니다.
자바스크립트에서는 큰따옴표 “”(double quotes) 또는 작은따옴표 ”(single quotes)를 사용하여 일반 문자열을 나타냅니다.
그러나 템플릿 리터럴에서는 백틱 “(backticks: 키보드의 물결키 자리에 위치)을 사용하여 문자열을 나타냅니다.
백틱을 활용하여 문자열 내에 변수와 표현식을 담을 수 있습니다.
개발자 도구에서 다음의 예제를 확인해 보겠습니다:
const website = 'shinyks';
const message = `Welcome to ${website}`;
console.log(message);
message 변수의 값에 템플릿 리터럴을 정의하는 백틱을 사용했습니다.
또한 문자열 내에 변수를 추가하기위해 ${} 구문을 넣었습니다.
이를 console.log() 메소드를 통해 출력하면 “Welcome to shinyks”를 볼 수 있습니다.
템플릿 리터럴 vs 일반 문자열
이제 일반 문자열과 어떤 부분이 다른지 알아보고 템플릿 리터럴의 장점을 알아보겠습니다.
문자열 연결
기존에 문자열을 연결하려면 더하기 기호(+)를 사용해야 했습니다:
const userName = 'Marie';
const balance = 10;
// 일반 문자열 사용
const str1 = 'Hi ' + userName + ',' + ' your balance is ' + balance + '.';
console.log("Regular string: ", str1);
// 템플릿 리터럴 사용
const str2 = `Hi ${userName}, your balance is ${balance}.`;
console.log("Template literal: ", str2);
일반 문자열을 사용하여 문자열을 연결하려면 더하기 기호를 많이 추가해야 합니다.
또한 올바른 위치의 공백 역시 추가해야 하므로 긴 문자열 작업 시 어렵고 복잡해 집니다.
반면 템플릿 리터럴을 사용하면 더하기 기호를 추가할 필요가 없습니다.
모든 것을 하나의 문자열로 함께 작성하고 변수는 ${} 구문을 사용하여 직접 추가할 수 있습니다.
여러 줄의 문자열
여러 줄 문자열을 처리할 때 기존의 일반 문자열 보다 간단히 처리할 수 있습니다.
일반 문자열의 경우 더하기 기호와 \n을 조합하여 새 줄을 표시해야 합니다.
그러나 템플릿 리터럴에는 더하기나 개행 문자가 필요하지 않습니다.
const regularString =
'Hello there! \n' +
'Welcome to our website. \n' +
'How can we help you today?';
const templateLiteral =
`Hello there!
Welcome to our website.
How can we help you today?`;
console.log(regularString);
console.log(templateLiteral);
regularString 변수나 templateLiteral 변수는 모두 동일한 출력을 제공합니다.
템플릿 문자열은 공백과 줄 바꿈을 자동으로 인식합니다.
가독성과 유지 관리
또한 템플릿 리터럴은 코드를 더 읽기 쉽고 유지 관리하기 쉽게 해줍니다.
이전 섹션에서 본 것처럼 더하기 기호를 연결할 필요가 없습니다. 또한 따옴표를 이스케이프 처리하는 것에 대해 걱정할 필요가 없습니다.
다음의 예제를 확인해 보겠습니다:
const city = "Paris";
const str1 = 'She said, "I love ' + city + ', it\'s beautiful."';
const str2 = `She said, "I love ${city}, it's beautiful.`;
console.log(str1);
console.log(str2);
기존 일반 문자열에는 다음이 필요합니다:
- 문자를 연결하기 위한 더하기 기호
- 작은따옴표와 큰따옴표 사용 시 주의
- 문자열 내에서 작은따옴표를 사용하려면 이스케이프 문자(\) 사용
백틱을 사용하면 이러한 자잘한 구문을 신경쓰지 않아도 됩니다.
템플릿 리터럴 사용 사례
지금까지 템플릿 리터럴이 무엇인지, 일반 문자열과는 어떤 부분이 다른지 비교해 봤습니다.
이제 실제 사례를 살펴보겠습니다.
HTML Markup 생성
HTML markup 생성 시 백틱을 사용하는 것을 자주 볼 수 있습니다.
백틱을 통해 자바스크립트 표현식을 HTML 문자열에 직접 포함할 수 있고, 이를 통해 역동적이고 데이터 중심적인 콘텐츠를 쉽게 만들 수 있습니다.
다음의 예제를 확인해 보겠습니다:
const user = {
name: "Marie",
age: 25,
};
const userProfile = `
<div>
<h2>Name: ${user.name}</h2>
<p>Age: ${user.age}</p>
</div>
`;${} 구문을 사용하면 문자열 내에서 직접 자바스크립트 표현식을 실행할 수 있습니다.
위 예제의 경우 사용자 객체의 속성 값을 읽는 데 사용했습니다.
동적 SQL 쿼리 생성
또한 백틱을 사용하여 변수나 표현식을 쿼리 문자열에 직접 넣어 동적 SQL 쿼리를 생성할 수 있습니다.
이는 런타임 값을 기반으로 간단하게 쿼리를 생성할 수 있음을 의미합니다.
const tableName = "users";
const columnName = "name";
const searchValue = "John";
const sqlQuery = `SELECT * FROM ${tableName} WHERE ${columnName} = '${searchValue}'`;Localization, Internalization
또 다른 템플릿 리터럴의 용도는 앱의 현지화 및 국제화를 처리하는 것입니다.
백틱을 사용하면 현지화된 콘텐츠 또는 언어 key에 대한 value를 문자열에 직접 넣을 수 있으므로 번역 관리가 더 쉽습니다.
const user = {
name: "Marie",
};
const locale = "fr";
const greetings = {
en: "Hello",
es: "Hola",
fr: "Bonjour"
};
const localizedGreeting = `${greetings[locale]} ${user.name}!`;
console.log(localizedGreeting);
이 예제에서는 번거로운 문자열 연결에 의존하지 않고 localizedGreeting 문자열을 만듭니다.
태그드 템플릿 리터럴(Tagged Template Literals)
태그드 템플릿 리터럴 기능은 고급 문자열 조작을 할 수 있게 해주는 자바스크립트의 기능입니다.
이 기능을 사용하려면 태그 함수와 태그드 템플릿이 필요합니다.
태그 함수는 문자열과 변수를 각각 매개변수로 받습니다. 그런 다음 설정된 조건이나 규칙에 따라 포맷을 정할 수 있습니다.
다음의 예제 처럼 태그 함수 뒤에 백틱을 위치시켜 실행합니다:
function taggedFunc(strings, ...values) {
console.log(strings);
console.log(values);
}
const name = 'Sarah';
const city = 'Rome';
taggedFunc`Hello ${name}. Welcome to ${city}.`;
여기에는 주목해야할 세 가지 사항이 있습니다.
첫째, 첫 번째 매개변수(이 예제에서는 문자열)는 항상 백틱 내의 모든 일반 문자열 블록의 배열입니다. 이 예제의 경우 아래와 같은 배열입니다.
['Hello ', '. Welcome to ', '.']두 번째, 나머지 매개변수는 백틱 내의 모든 변수와 평가된 표현식이 됩니다.
이는 자바스크립트의 스프레드 연산자를 통해 모든 항목을 간단히 얻을 수 있습니다.
['Sarah', 'Rome']마지막으로 taggedFunc 함수가 어떻게 사용되는지 주목해야 합니다.
이는 일반 함수와는 다르게 괄호를 사용하여 호출하지 않습니다.
taggedFunc`Hello ${name}. Welcome to ${city}.` ✅
taggedFunc(Hello ${name}. Welcome to ${city}.) ❌태그드 템플릿 리터럴 사용 예제
이제 실질적으로 사용할 수 있는 태그드 템플릿 리터럴의 예제를 알아보겠습니다.
Example 1
function receiptTag(strings, ...values) {
let finalString = '';
for (let i = 0; i < values.length; i++) {
finalString += strings[i] + values[i];
}
finalString += strings[strings.length - 1];
return finalString;
}
const item = 'apple';
const price = 2.5;
const quantity = 3;
const message = receiptTag`
You have ${quantity} ${item}s.
Unit cost: $${price}.
Total cost: $${quantity * price}.
`;
console.log(message);
이 예제에서 recieptTag 함수는 다음 네 가지 표현식이 포함된 템플릿 리터럴을 받습니다.
- ${quantity}
- ${item}
- ${price}
- ${quantity * price}
values 배열에는 이 표현식이 실행된 값이 들어옵니다.
[3, 'apple', 2.5, 7.5]이제 태그된 함수에 정해진 룰에 따라 데이터가 처리되고 콘솔에 수량, 항목, 단가, 총액에 대한 메시지가 표시됩니다.
Example 2
function greetUser(strings, name) {
const now = new Date();
const currentHour = now.getHours();
const timeOfDay = currentHour < 12 ? 'morning' : currentHour < 17 ? 'afternoon' : 'evening';
return `Good ${timeOfDay} ${name}${strings[1]}`;
}
const userName = 'Ama';
console.log(greetUser`Hello ${userName}, nice to meet you!`);
이 예제에서는 태그드 템플릿 리터럴을 사용하여 현재 시간에 따라 사용자에게 다양하게 인사하도록 합니다.
태그드 함수는 먼저 Date 객체를 사용하여 현재 시간을 가져옵니다. 그런 다음 삼항 연산자를 사용하여 시간을 결정합니다.
이로서 시간에 따른 인사 문자열이 리턴됩니다. 여기서 태그드 함수에 입력한 내용과 결과 메시지가 어떻게 다른지 확인해보기 바랍니다.
정리
템플릿 리터럴은 자바스크립트의 문자열 작업을 편리하게 해줍니다.
이 포스트에서는 문법 구문과 이를 프로젝트에서 실질적으로 사용하는 방법에 대해 알아봤습니다.
또한 고급 기능인 태그드 템플릿 리터럴에 대해서도 알아봤습니다.
태그드 함수는 문자열 블록과 표현식의 배열을 받는 함수이고, 함수에 작성된 논리를 기반으로 새로운 문자열을 리턴합니다.