[javascript] Lodash의 언더스코어 템플릿 기능과 사용 예제

21 Nov 2023

javascript

Lodash는 JavaScript 유틸리티 라이브러리로, 다양한 기능을 제공합니다. 그 중에서도 언더스코어 템플릿 기능은 특히 유용합니다. 이 기능을 사용하면 템플릿 문자열을 동적으로 생성할 수 있으며, 변수를 쉽게 삽입하고 조작할 수 있습니다.

언더스코어 템플릿 기능 사용하기

Lodash의 언더스코어 템플릿은 _.template() 함수를 사용하여 사용할 수 있습니다. 이 함수는 템플릿 문자열과 변수 객체를 인자로 받습니다.

const templateString = "Hello, <%= name %>!";
const compiledTemplate = _.template(templateString);

const result = compiledTemplate({ name: "John" });
console.log(result); // 출력 결과: "Hello, John!"

위의 예제에서는 템플릿 문자열에 <%= name %> 부분이 있습니다. 이 부분은 변수 name을 삽입하기 위한 플레이스홀더로 사용됩니다. _.template() 함수는 이러한 플레이스홀더를 변수 값으로 치환하여 최종 결과를 반환합니다.

반복문과 조건문 사용하기

언더스코어 템플릿에는 반복문과 조건문도 사용할 수 있습니다. 이를 통해 동적인 템플릿 생성이 가능해집니다. 아래 예제를 참고해보세요.

const templateString = `
  <% if (score >= 90) { %>
    <p>우수합니다!</p>
  <% } else if (score >= 80) { %>
    <p>잘했습니다!</p>
  <% } else { %>
    <p>분발하세요!</p>
  <% } %>
`;

const compiledTemplate = _.template(templateString);

const result1 = compiledTemplate({ score: 95 });
console.log(result1); // 출력 결과: "<p>우수합니다!</p>"

const result2 = compiledTemplate({ score: 85 });
console.log(result2); // 출력 결과: "<p>잘했습니다!</p>"

const result3 = compiledTemplate({ score: 75 });
console.log(result3); // 출력 결과: "<p>분발하세요!</p>"

위의 예제에서는 템플릿 문자열 안에서 JavaScript 코드를 사용하여 동적인 조건문을 작성하였습니다. 이를 통해 점수에 따라 다른 메시지를 출력하는 템플릿을 만들었습니다.

참고 자료

Lodash 공식 문서: https://lodash.com/docs/4.17.15#template
Lodash 언더스코어 템플릿 예제 코드: https://lodash.com/docs/4.17.15#template-examples