• Tagged Template Literals 문법 :: 마이구미
    Javascript 2021. 6. 30. 22:00
    반응형
    이 글은 "Tagged Template Literals" 문법을 다룬다.
    이 문법은 직접 구현해서 사용하는 경우는 흔치 않지만 이미 여러 라이브러리에서 활용하고 있어 쉽게 접할 수 있다.
    MDN - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

     

    Template Literals

    우리는 동적인 문자열을 처리할 때 다음과 같은 형태를 많이 사용한다.

     

    const userName = 'Mygumi';
    const age = 20;
    const output = `Hi, ${userName} and I am ${age}.`;

     

    ES6 에서 새롭게 도입된 기능으로 템플릿 리터럴(Template Literals) 이라고 불린다.

    백틱(`)  을 사용하여 문자열과 변수를 함께 사용할 수 있어 문자열 처리에 유용한 기능이다.

     

    Tagged 가 붙은 "Tagged Template Literals" 는 무엇인가?

    템플릿 리터럴의 발전된 형태로써, 함수 형태로 사용할 수 있다.

    이 문법은 문자열에서 userName, age 와 같은 변수들과 "Hi," "and I am" 과 같은 정적인 문자열을 구분지을 수 있다.

    여기서는 정적 데이터, 동적 데이터라고 구분 짓겠다.

    예제를 통해 확인해보자.

     

    function transform(staticData, ...dynamicData) {
      console.log(staticData); // ["Hi, ", " and I am ", "."]
      console.log(dynamicData); // ["Mygumi", 20]
    }
    
    transform`Hi, ${userName} and I am ${age}.`;

     

    transform 함수를 일반적인 함수 호출 방식인 transform() 이 아닌 transform`` 형태인 것을 볼 수 있다.

    첫번째 파라미터에는 정적 데이터가 저장되어 있고, 나머지 파라미터에는 동적 데이터가 저장되어 있는 모습을 볼 수 있다.


    동적 데이터를 자세히 보면 age 값의 타입은 String 이 아닌 Number 형태로 타입이 유지된다.

    만약 function 으로 호출했다면, 전달되는 파라미터는 단순 하나의 문자열이다.

     

    function transform(staticData) {
      console.log(staticData); // Hi, Mygumi and I am 20.
    }
    
    transform(`Hi, ${userName} and I am ${age}.`);

     

    즉, Tagged Template Literals 문법을 사용하면 타입에 상관없이 Function, Number, Array, Object 등을 전달하고 이를 실행할 수 있게 된다.

     

    이게 얼마나 파워풀한지 가늠이 안될 수 있다.

    실제로 우리가 이것을 활용해 무언가를 구현할 일은 크게 없을 것이다.

    하지만 많은 라이브러리에 이를 기반으로 구현이 되어있고 우리는 그것을 편하게 사용하고 있다.

    이 문법을 통해 사용되는 라이브러리들이 어떻게 이런 매직이 가능한지 이해하고 있으면 조금이나마 도움이 될 수 있다.

     

    실제 사용 사례

    Styled-components

    const Button = styled.a`
      display: inline-block;
      border-radius: 3px;
    
      ${props => props.primary && css`
        background: white;
        color: black;
      `}
    `

     

    Apollo GraphQL

    gql`
      mutation AddTodo($type: String!) {
        addTodo(type: $type) {
          id
          type
        }
      }
    `;

     

    Jest

    test.each`
      a    | b    | expected
      ${1} | ${1} | ${2}
      ${1} | ${2} | ${3}
      ${2} | ${1} | ${3}
    `('returns $expected when $a is added $b', ({a, b, expected}) => {
      expect(a + b).toBe(expected);
    });

     

    i18n

    i18n`Hello ${name}!`

     

    참고 링크

    https://mxstbr.blog/2016/11/styled-components-magic-explained/

    https://patelhemil.medium.com/magic-of-tagged-templates-literals-in-javascript-e0e2379b1ffc

    반응형

    댓글

Designed by Tistory.