Lodash는 JavaScript 유틸리티 라이브러리로서 다양한 기능을 제공합니다. 그 중에서도 템플릿 함수는 문자열 템플릿을 쉽게 처리할 수 있도록 도와줍니다. 이번 글에서는 Lodash의 템플릿 함수들과 그들의 사용 예제를 살펴보도록 하겠습니다.
1. template 함수
template 함수는 문자열 템플릿을 활용하여 동적으로 문자열을 생성하는 데에 사용됩니다. 아래는 template 함수의 기본 사용법입니다.
const template = _.template("Hello <%= name %>!");
const result = template({ name: "John" });
console.log(result); // 출력: "Hello John!"
위의 예제에서는 “Hello <%= name %>!”라는 템플릿 문자열을 만들고, 이를 template 함수에 전달하여 name이라는 동적 데이터를 포함하는 최종 문자열을 생성합니다.
2. templateSettings 객체
templateSettings 객체는 템플릿 함수의 동작을 세부적으로 제어하기 위해 사용됩니다. 아래는 templateSettings 객체를 사용하여 템플릿 함수의 동작을 사용자 정의하는 예제입니다.
_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
const template = _.template("Hello {{ name }}!");
const result = template({ name: "Jane" });
console.log(result); // 출력: "Hello Jane!"
위의 예제에서는 templateSettings.interpolate를 사용하여 템플릿 문자열에서 변수를 참조하는 문법을 ““으로 지정하였습니다. 이후 템플릿 함수를 호출할 때, ““이라는 템플릿 문자열을 사용하여 동적으로 값을 바인딩합니다.
3. template 함수의 반환 값
template 함수는 생성된 동적 문자열을 반환합니다. 이 반환 값으로는 함수가 만들어지며, 필요한 매개변수를 전달하여 최종 문자열을 생성할 수 있습니다. 아래는 template 함수의 반환 값 활용 예제입니다.
const template = _.template("Hello <%= name %>!");
const johnTemplate = template({ name: "John" });
const janeTemplate = template({ name: "Jane" });
console.log(johnTemplate()); // 출력: "Hello John!"
console.log(janeTemplate()); // 출력: "Hello Jane!"
위의 예제에서는 template 함수를 호출했을 때 반환되는 함수를 변수에 저장합니다. 그 다음 해당 변수에 필요한 매개변수를 전달하여 최종 문자열을 생성하고 출력합니다.
결론
Lodash의 템플릿 함수들은 문자열 템플릿을 더욱 편리하고 유연하게 다룰 수 있도록 도와줍니다. template 함수와 templateSettings 객체를 올바르게 활용하면 동적 문자열 생성에 매우 유용합니다. Lodash 공식 문서에서 추가적인 정보를 확인할 수 있으니, 관심 있는 분들은 참고해보시기 바랍니다.
references: