React Tagged Template Literal

1. Tagged Template Literal 기본 구조

tagFunction`문자열 ${expression} 문자열`;

 

• tagFunction : 템플릿 문자열을 처리하는 함수
• 문자열 ${expression} : 템플릿 리터럴로 표현되는 문자열

태그 함수는 템플릿 리터럴의 문자열과 삽입된 표현식을 분리하여 전달받아 가공한 결과를 반환한다.

 

2. 사용법

const userName = '무지';
const weather = '맑음';
const str = `안녕하세요. ${userName}님, 오늘 날씨는 ${weather} 입니다.`;

const result3 = sayHello(['안녕하세요. ', '님, 오늘 날씨는 ', ' 입니다.'], userName, weather);

 

원래 사용하고자 하면 위와 같이, 배열과 매개변수로 전달을 해줘야 한다. 하지만

 

const userName = '무지';
const weather = '맑음';
const str = `안녕하세요. ${userName}님, 오늘 날씨는 ${weather} 입니다.`;

const result4 = sayHello`안녕하세요. ${userName}님, 오늘 날씨는 ${weather} 입니다.`;

 

이렇게도 작성이 가능하다.

 

다르게도 보여주겠다.

 

2-1. 함수 정의

태그 함수는 첫 번째 인자로 문자열 배열, 두 번째 이후로 삽입된 표현식의 값을 받는다.

function tag(strings, ...values) {
    console.log(strings); // 템플릿 문자열이 분리된 배열
    console.log(values); // 삽입된 표현식의 값들
    return '가공된 결과';
}

const result = tag`Hello ${'World'}! How are ${'you'}?`;
console.log(result); // '가공된 결과'

 

2-2. 문자열 조합 및 가공

function format(strings, ...values) {
    return strings.reduce((acc, str, i) => {
        return acc + str + (values[i] ? `[${values[i]}]` : '');
    }, '');
}

const name = 'Alice';
const age = 25;

const result = format`My name is ${name} and I am ${age} years old.`;
console.log(result); 
// 출력: "My name is [Alice] and I am [25] years old."

 

2-3. HTML Escape 처리 예제

태그 함수를 사용하여 HTML 삽입 시 악성 코드(예: XSS)를 방지할 수 있다.

function escapeHTML(strings, ...values) {
    const escape = (str) =>
        str.replace(/&/g, '&')
           .replace(/</g, '&lt;')
           .replace(/>/g, '&gt;')
           .replace(/"/g, '&quot;')
           .replace(/'/g, '&#039;');

    return strings.reduce((acc, str, i) => {
        return acc + str + (values[i] ? escape(values[i]) : '');
    }, '');
}

const unsafeString = '<script>alert("XSS");</script>';
const escaped = escapeHTML`User input: ${unsafeString}`;
console.log(escaped);
// 출력: "User input: &lt;script&gt;alert(&quot;XSS&quot;);&lt;/script&gt;"

 

3. Tagged Template Literal의 주요 활용

• 다국어 지원 및 텍스트 국제화(i18n): 템플릿 문자열을 처리해 특정 언어로 번역하거나 가공하는 데 유용하다.
• HTML 생성 및 escaping : 템플릿 리터럴을 통해 동적 HTML을 생성하면서 안전하게 처리할 수 있다.
• SQL Query 처리 : 쿼리의 동적 파라미터를 안전하게 처리하여 SQL Injection을 방지하다.
• 스타일 구성 : CSS-in-JS 라이브러리(예: Styled-components)에서 사용된다.

const styled = (strings, ...values) => `Styled CSS: ${strings.join('')}`;
const color = 'red';

const css = styled`background-color: ${color}; color: white;`;
console.log(css);
// 출력: "Styled CSS: background-color: red; color: white;"

 

4. 요약

• 템플릿 리터럴과 태그 함수의 조합을 통해 문자열 처리를 좀 더 유연하게 할 수 있다.
• 태그 함수는 문자열 분리와 값 처리를 제공하며, 가공된 문자열을 반환한다.
• 다양한 사례를 통해, 보안, 국제화, 스타일링 등을 보다 안전하고 효율적으로 구현이 가능하다.