템플릿 리터럴

작성자

익명

작성일

2025.09.02

조회수

버전

템플릿 리터럴템플릿 리터럴(Template Literal)은 JavaScript에서 문자열을 보다 유연하고 직관적으로 생성할 수 있도록 도와주는 문법 기능입니다. ECMAScript 205(ES6)에서 도입된 이 기능은 기존의 문자열 연결 방식(예: `+` 연산자)을 대체하거나 보완하여, 가독성과 유지보수성을 크게 향상시킵니다. 특히 멀티라인 문자열 작성과 변수 삽입(interpolation)에 강점을 지닙니다.

개요

JavaScript에서 문자열을 다룰 때, 이전에는 작은따옴표(')나 큰따옴표(")를 사용하여 문자열을 정의하고, 변수를 삽입하거나 여러 줄로 나누려면 + 연산자나 \n 이스케이프 문자를 사용해야 했습니다. 예를 들어:

var name = "홍길동";
var age = 25;
var message = "안녕하세요, 제 이름은 " + name + "이고, 나이는 " + age + "세입니다.";

이러한 방식은 복잡한 문자열을 다룰수록 가독성이 떨어지고 오류 발생 가능성이 높아집니다. 템플릿 리터럴은 이러한 문제를 해결하기 위해 백틱(

)을 사용하여 문자열을 정의하고, ${표현식} 형태로 변수나 연산 결과를 직접 삽입할 수 있게 해줍니다.

기본 문법

템플릿 리터럴은 백틱(backtick, `)으로 감싸서 정의합니다. 변수나 표현식은 ${} 안에 넣어 삽입합니다.

예시

const name = "김민수";
const age = 30;
const greeting = `안녕하세요, 저는 ${name}이고, ${age}살입니다.`;

console.log(greeting);
// 출력: 안녕하세요, 저는 김민수이고, 30살입니다.

${} 안에는 변수뿐만 아니라 함수 호출, 삼항 연산자, 수식 등 임의의 JavaScript 표현식을 넣을 수 있습니다.

const x = 10;
const y = 20;
const result = `덧셈 결과: ${x + y}, 짝수 여부: ${y % 2 === 0 ? '예' : '아니오'}`;
console.log(result);
// 출력: 덧셈 결과: 30, 짝수 여부: 예

주요 기능

1. 멀티라인 문자열 (Multi-line Strings)

기존의 문자열은 줄바꿈을 위해 \n을 사용하거나 여러 문자열을 +로 연결해야 했습니다. 템플릿 리터럴은 백틱 안에서 직접 줄바꿈을 표현할 수 있습니다.

const poem = `산은 높고,
물은 흐르며,
바람은 속삭인다.`;

console.log(poem);
// 출력:
// 산은 높고,
// 물은 흐르며,
// 바람은 속삭인다.

이 방식은 HTML 문자열이나 SQL 쿼리 등 여러 줄에 걸쳐 작성해야 하는 경우 매우 유용합니다.

2. 문자열 보간 (String Interpolation)

변수나 표현식을 문자열 내에 자연스럽게 삽입할 수 있습니다. 이를 보간(interpolation)이라고 합니다.

const user = { name: "이지은", email: "lee@example.com" };
const profile = `사용자 정보:
이름: ${user.name}
이메일: ${user.email}`;

console.log(profile);
// 출력:
// 사용자 정보:
// 이름: 이지은
// 이메일: lee@example.com

3. 태그드 템플릿 리터럴 (Tagged Templates)

템플릿 리터럴 앞에 함수 이름을 붙여 사용할 수 있으며, 이를 태그드 템플릿(tagged template)이라고 합니다. 이 방식을 통해 템플릿을 파싱하거나 보안 처리(예: XSS 방지), 국제화(i18n) 등을 구현할 수 있습니다.

예시: 간단한 태그 함수

function highlight(strings, ...values) {
  let result = '';
  strings.forEach((str, i) => {
    result += str;
    if (i < values.length) {
      result += `<strong>${values[i]}</strong>`;
    }
  });
  return result;
}

const name = "JavaScript";
const feature = "템플릿 리터럴";
const html = highlight`이 문서는 ${name}의 ${feature}에 대해 설명합니다.`;

console.log(html);
// 출력: 이 문서는 <strong>JavaScript</strong>의 <strong>템플릿 리터럴</strong>에 대해 설명합니다.

태그드 템플릿은 [styled-components](/doc/%EA%B8%B0%EC%88%A0/%EC%9B%B9%EA%B0%9C%EB%B0%9C/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%20%EA%B0%9C%EB%B0%9C/styled-components) 같은 라이브러리에서 CSS를 자바스크립트 안에 작성할 때 널리 사용됩니다.

주의사항 및 제한사항

템플릿 리터럴은 표현식만 허용되며, 문(statement)은 포함할 수 없습니다.
예: ${if (x > 0) { ... }} → 문법 오류
백틱 안에서 ${}를 문자 그대로 출력하려면 이스케이프가 필요합니다.
예: \${variable}` → `${variable} (텍스트로 출력)
성능 고려: 단순한 문자열 연결에는 기존 방식이 더 빠를 수 있으나, 복잡한 문자열 구조에서는 템플릿 리터럴이 더 효율적입니다.

활용 사례

HTML 동적 생성 (예: SPA에서의 템플릿 렌더링)
로그 메시지 작성
SQL 쿼리 문자열 생성 (주의: 보안 이슈 존재, 파라미터 바인딩 권장)
국제화(i18n) 메시지 처리
CSS-in-JS (styled-components 등)

참고 자료 및 관련 문서

MDN Web Docs - Template literals
ECMAScript 2015 Language Specification
관련 개념: 문자열 보간, 백틱(`), 태그드 템플릿, ES6 문법

템플릿 리터럴은 현대 자바스크립트 개발에서 없어서는 안 될 핵심 기능 중 하나입니다. 가독성과 생산성을 높이는 동시에 다양한 고급 패턴을 지원하므로, 프로젝트에서 적극적으로 활용하는 것이 권장됩니다.

📝 마크다운 원본

이 문서의 마크다운 원본 내용입니다.

# 템플릿 리터럴템플릿 리터럴(Template Literal)은 **JavaScript**에서 문자열을 보다 유연하고 직관적으로 생성할 수 있도록 도와주는 문법 기능입니다. ECMAScript 205(ES6)에서 도입된 이 기능은 기존의 문자열 연결 방식(예: `+` 연산자)을 대체하거나 보완하여, 가독성과 유지보수성을 크게 향상시킵니다. 특히 멀티라인 문자열 작성과 **변수 삽입**(interpolation)에 강점을 지닙니다.

---

## 개요

JavaScript에서 문자열을 다룰 때, 이전에는 작은따옴표(`'`)나 큰따옴표(`"`)를 사용하여 문자열을 정의하고, 변수를 삽입하거나 여러 줄로 나누려면 `+` 연산자나 `\n` 이스케이프 문자를 사용해야 했습니다. 예를 들어:

```js
var name = "홍길동";
var age = 25;
var message = "안녕하세요, 제 이름은 " + name + "이고, 나이는 " + age + "세입니다.";
```

이러한 방식은 복잡한 문자열을 다룰수록 가독성이 떨어지고 오류 발생 가능성이 높아집니다. 템플릿 리터럴은 이러한 문제를 해결하기 위해 백틱(``` ` ```)을 사용하여 문자열을 정의하고, `${표현식}` 형태로 변수나 연산 결과를 직접 삽입할 수 있게 해줍니다.

---

## 기본 문법

템플릿 리터럴은 **백틱**(backtick, `` ` ``)으로 감싸서 정의합니다. 변수나 표현식은 `${}` 안에 넣어 삽입합니다.

### 예시

```js
const name = "김민수";
const age = 30;
const greeting = `안녕하세요, 저는 ${name}이고, ${age}살입니다.`;

console.log(greeting);
// 출력: 안녕하세요, 저는 김민수이고, 30살입니다.
```

`${}` 안에는 변수뿐만 아니라 함수 호출, 삼항 연산자, 수식 등 **임의의 JavaScript 표현식**을 넣을 수 있습니다.

```js
const x = 10;
const y = 20;
const result = `덧셈 결과: ${x + y}, 짝수 여부: ${y % 2 === 0 ? '예' : '아니오'}`;
console.log(result);
// 출력: 덧셈 결과: 30, 짝수 여부: 예
```

---

## 주요 기능

### 1. 멀티라인 문자열 (Multi-line Strings)

기존의 문자열은 줄바꿈을 위해 `\n`을 사용하거나 여러 문자열을 `+`로 연결해야 했습니다. 템플릿 리터럴은 백틱 안에서 직접 줄바꿈을 표현할 수 있습니다.

```js
const poem = `산은 높고,
물은 흐르며,
바람은 속삭인다.`;

console.log(poem);
// 출력:
// 산은 높고,
// 물은 흐르며,
// 바람은 속삭인다.
```

이 방식은 HTML 문자열이나 SQL 쿼리 등 여러 줄에 걸쳐 작성해야 하는 경우 매우 유용합니다.

---

### 2. 문자열 보간 (String Interpolation)

변수나 표현식을 문자열 내에 자연스럽게 삽입할 수 있습니다. 이를 **보간**(interpolation)이라고 합니다.

```js
const user = { name: "이지은", email: "lee@example.com" };
const profile = `사용자 정보:
이름: ${user.name}
이메일: ${user.email}`;

console.log(profile);
// 출력:
// 사용자 정보:
// 이름: 이지은
// 이메일: lee@example.com
```

---

### 3. 태그드 템플릿 리터럴 (Tagged Templates)

템플릿 리터럴 앞에 함수 이름을 붙여 사용할 수 있으며, 이를 **태그드 템플릿**(tagged template)이라고 합니다. 이 방식을 통해 템플릿을 파싱하거나 보안 처리(예: XSS 방지), 국제화(i18n) 등을 구현할 수 있습니다.

#### 예시: 간단한 태그 함수

```js
function highlight(strings, ...values) {
  let result = '';
  strings.forEach((str, i) => {
    result += str;
    if (i < values.length) {
      result += `<strong>${values[i]}</strong>`;
    }
  });
  return result;
}

const name = "JavaScript";
const feature = "템플릿 리터럴";
const html = highlight`이 문서는 ${name}의 ${feature}에 대해 설명합니다.`;

console.log(html);
// 출력: 이 문서는 <strong>JavaScript</strong>의 <strong>템플릿 리터럴</strong>에 대해 설명합니다.
```

태그드 템플릿은 `styled-components` 같은 라이브러리에서 CSS를 자바스크립트 안에 작성할 때 널리 사용됩니다.

---

## 주의사항 및 제한사항

- 템플릿 리터럴은 **표현식만 허용**되며, 문(statement)은 포함할 수 없습니다.  
  예: `${if (x > 0) { ... }}` → 문법 오류

- 백틱 안에서 `${}`를 문자 그대로 출력하려면 이스케이프가 필요합니다.  
  예: `\${variable}` → `${variable}` (텍스트로 출력)

- 성능 고려: 단순한 문자열 연결에는 기존 방식이 더 빠를 수 있으나, 복잡한 문자열 구조에서는 템플릿 리터럴이 더 효율적입니다.

---

## 활용 사례

- HTML 동적 생성 (예: SPA에서의 템플릿 렌더링)
- 로그 메시지 작성
- SQL 쿼리 문자열 생성 (주의: 보안 이슈 존재, 파라미터 바인딩 권장)
- 국제화(i18n) 메시지 처리
- CSS-in-JS (styled-components 등)

---

## 참고 자료 및 관련 문서

- [MDN Web Docs - Template literals](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals)
- [ECMAScript 2015 Language Specification](https://262.ecma-international.org/6.0/#sec-template-literals)
- 관련 개념: 문자열 보간, 백틱(`), 태그드 템플릿, ES6 문법

---

템플릿 리터럴은 현대 자바스크립트 개발에서 없어서는 안 될 핵심 기능 중 하나입니다. 가독성과 생산성을 높이는 동시에 다양한 고급 패턴을 지원하므로, 프로젝트에서 적극적으로 활용하는 것이 권장됩니다.

AI 생성 콘텐츠 안내

이 문서는 AI 모델(qwen-3-235b-a22b-instruct-2507)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

위키너와나