18. 자바스크립트 템플릿 리터럴

다이나둘 2025. 2. 28. 10:00

2025. 2. 28. 10:00

자바스크립트 템플릿 리터럴

열일곱 번째 포스팅까지 다양한 주제를 다루었다면, 이번에는 "문법 및 핵심 개념" 범주에 속하는 "템플릿 리터럴"에 대해 작성해보려 한다. 템플릿 리터럴(Template Literals)은 ES6에서 도입된 문자열 처리 문법으로, 문자열 생성과 다중 줄 표현을 간소화한다.

템플릿 리터럴은 변수 삽입과 표현식 평가를 지원하며, 기존 문자열 연결 방식을 간편하게 대체한다. 이번 포스팅에서는 템플릿 리터럴의 개념, 기본 사용법, 태그드 템플릿, 활용 방법, 그리고 실습 예제를 작성해볼 예정이다.

템플릿 리터럴은 자바스크립트의 문자열 처리를 이해하는 데 필수적이다. 콘솔 또는 HTML 파일에서 예제를 실행하며 템플릿 리터럴의 동작을 체감할 수 있다.

템플릿 리터럴의 개념

템플릿 리터럴은 백틱(`)으로 감싸는 문자열이다. 기존 문자열은 작은따옴표('')나 큰따옴표("")로 정의되며, 연결 시 + 연산자를 사용한다. 반면 템플릿 리터럴은 변수와 표현식을 직접 삽입하며, 다중 줄 문자열을 지원한다.

다음은 기본적인 템플릿 리터럴 예제이다:

const name = '홍길동';
const greeting = `안녕하세요, ${name}님!`;
console.log(greeting); // "안녕하세요, 홍길동님!"

위 예제는 템플릿 리터럴로 문자열을 생성한다.

템플릿 리터럴은 코드 가독성과 편의성을 높인다. 이는 문자열 조작에서 필수적이다.

기본 사용법

템플릿 리터럴은 ` 백틱으로 선언한다.

1. 변수 삽입

${}로 변수를 삽입한다:

const age = 30;
const message = `저는 ${age}세입니다.`;
console.log(message); // "저는 30세입니다."

2. 다중 줄 문자열

줄바꿈을 직접 표현한다:

const poem = `
    안녕하세요
    반갑습니다
`;
console.log(poem);
// "
//     안녕하세요
//     반갑습니다
// "

예제: 기본 사용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>템플릿 리터럴 기본</title>
</head>
<body>
    <button id="btn">메시지 표시</button>
    <div id="result"></div>
    <script>
        const name = '김유신';
        const age = 25;
        const message = `이름: ${name}
나이: ${age}세`;

        const btn = document.getElementById('btn');
        const result = document.getElementById('result');

        btn.addEventListener('click', () => {
            result.textContent = message;
        });
    </script>
</body>
</html>

이 예제는 다중 줄 메시지를 표시한다.

태그드 템플릿

태그드 템플릿은 함수를 통해 템플릿 리터럴을 처리한다).

1. 태그 함수 정의

문자열과 표현식을 인자로 받는다:

function tag(strings, ...values) {
    return strings[0] + values[0].toUpperCase() + strings[1];
}
const name = '홍길동';
const result = tag`안녕, ${name}님!`;
console.log(result); // "안녕, 홍길동님!"

2. 태그드 활용

형식을 커스터마이징한다:

function highlight(strings, ...values) {
    return strings.reduce((acc, str, i) => {
        return acc + str + (values[i] ? `<strong>${values[i]}</strong>` : '');
    }, '');
}
const text = highlight`이름: ${name}, 나이: ${age}`;
console.log(text); // "이름: <strong>홍길동</strong>, 나이: <strong>25</strong>"

예제: 태그드 템플릿

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>태그드 템플릿</title>
</head>
<body>
    <button id="btn">강조 표시</button>
    <div id="result"></div>
    <script>
        function bold(strings, ...values) {
            return strings.reduce((acc, str, i) => {
                return acc + str + (values[i] ? `<b>${values[i]}</b>` : '');
            }, '');
        }
        const name = '김유신';
        const age = 30;

        const btn = document.getElementById('btn');
        const result = document.getElementById('result');

        btn.addEventListener('click', () => {
            result.innerHTML = bold`이름: ${name}, 나이: ${age}세`;
        });
    </script>
</body>
</html>

이 예제는 태그드 템플릿으로 강조한다.

템플릿 활용

템플릿 리터럴은 다양한 상황에서 활용된다.

1. 동적 HTML 생성

HTML을 생성한다:

const items = ['사과', '바나나'];
const list = `
    <ul>
        ${items.map(item => `<li>${item}</li>`).join('')}
    </ul>
`;
console.log(list);
// "
//     <ul>
//         <li>사과</li>
//         <li>바나나</li>
//     </ul>
// "

2. 문자열 포매팅

복잡한 문자열을 포맷한다:

const price = 1000;
const tax = 0.1;
const total = `총액: ${price + price * tax}원`;
console.log(total); // "총액: 1100원"

예제: HTML 생성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML 생성</title>
</head>
<body>
    <button id="btn">목록 생성</button>
    <div id="result"></div>
    <script>
        const fruits = ['사과', '오렌지', '포도'];
        const btn = document.getElementById('btn');
        const result = document.getElementById('result');

        btn.addEventListener('click', () => {
            const html = `
                <ul>
                    ${fruits.map(fruit => `<li>${fruit}</li>`).join('')}
                </ul>
            `;
            result.innerHTML = html;
        });
    </script>
</body>
</html>

이 예제는 목록을 생성한다.

실습 예제: 템플릿 관리

템플릿 리터럴을 활용한 관리 예제이다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>템플릿 관리</title>
    <style>
        #userList {
            list-style-type: none;
            padding: 0;
        }
        #userList li {
            padding: 5px;
            background: #f0f0f0;
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <input type="text" id="nameInput" placeholder="이름">
    <input type="number" id="ageInput" placeholder="나이">
    <button id="addBtn">추가</button>
    <ul id="userList"></ul>
    <script>
        const users = [];
        const nameInput = document.getElementById('nameInput');
        const ageInput = document.getElementById('ageInput');
        const addBtn = document.getElementById('addBtn');
        const userList = document.getElementById('userList');

        function renderUsers() {
            userList.innerHTML = `
                ${users.map(user => `
                    <li>${user.name}, ${user.age}세</li>
                `).join('')}
            `;
        }

        addBtn.addEventListener('click', () => {
            if (nameInput.value && ageInput.value) {
                users.push({
                    name: nameInput.value,
                    age: parseInt(ageInput.value)
                });
                renderUsers();
                nameInput.value = '';
                ageInput.value = '';
            }
        });
    </script>
</body>
</html>

이 예제는 사용자 목록을 관리한다.

실무에서의 템플릿 리터럴

실무에서는 동적 콘텐츠에 활용한다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>동적 콘텐츠</title>
</head>
<body>
    <button id="fetchBtn">데이터 표시</button>
    <div id="result"></div>
    <script>
        const fetchBtn = document.getElementById('fetchBtn');
        const result = document.getElementById('result');

        fetchBtn.addEventListener('click', async () => {
            const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
            const data = await response.json();
            result.innerHTML = `
                <h3>${data.name}</h3>
                <p>이메일: ${data.email}</p>
                <p>전화: ${data.phone}</p>
            `;
        });
    </script>
</body>
</html>

이 예제는 API 데이터를 표시한다.

주의할 점

템플릿 리터럴은 XSS 공격에 주의한다. 다중 줄 문자열의 공백을 관리한다. 복잡한 로직은 함수로 분리한다.

결론

템플릿 리터럴의 선언, 태그드를 학습하며 실습 예제를 통해 알아보았다. 다음 포스팅에서는 디스트럭처링에 대해 작성해볼 예정이다.

저작자표시 (새창열림)

'코딩 공부 > 자바스크립트' 카테고리의 다른 글

20. 자바스크립트 스프레드와 레스트 연산자 (Spread and Rest Operators) (4)	2025.03.04
19. 자바스크립트 디스트럭처링 (Javascript Destructuring) (0)	2025.02.28
17. 자바스크립트 모듈 (0)	2025.02.28
16. 자바스크립트 클래스 (1)	2025.02.27
15. 자바스크립트 this 바인딩 (0)	2025.02.27

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

다이나둘 일기장