Tagged Template Literal(styled-components)

MDN

참고링크1

참고링크2

tagged template literal 이 대체 뭐야?

설명은 링크로 대신한다. 일겅보면 tagged template literal 이 무엇인지는 조금은 이해할 수 있다. 하지만 왜 이 기능을 이용해서 styled-components 사용하는지는 아직 이해가 가지 않는다.

tagged template literal 를 일반 함수을 사용하는 것처럼 만들어보자

보간을 사용하지 않은 일반 문자열만 건낸경우

// Equivalent!!!
func`guess it!`
func(['guess it!'])

보간을 사용한 경우 (한개의 인자)

const name = 'sanam';

func`guess it ${name}!`;
func(['guess it!', '!'], name);

첫 번째 예시와 뭔가 다랄진걸 눈치챌 수 있다. 보간으로 넣은 변수는 배열에 포함되지 않고 두 번째 인자로 들어가게 된다.

그리고 문자열들은 보간된 변수를 기준으로 split up 되서 배열로 첫 번째 인자로 들어간다.

두개의 보간을 사용한 예를 보자

const name = 'sanam';
const age = 28;

func`I'm ${age} years old, ${name}`;

func(['I\'m ', 'years old, '. ''], age, name);

두 개 이상의 보간이 들어갈 경우에도 문자열은 나눠져서 하나의 배열이 된다. 보간으로 들어간 변수들은 보간 순서대로 인자로 들어온다.

그렇다면 왜 styled components는 Tagged Template Literal를 사용해?

시작하기 앞서 함수를 하나 만들자.

const execFuncArgs = (...args) => args.forEach(arg => {
  if (typeof arg === 'function') {
    arg()
  }
})

해당 함수는 인자가 만약 함수타입이라면 실행하는 코드다. 이 함수를 이용해서 실험을 해보자.

// 1번
execFuncArgs(`Test: ${() => console.log('called as normally')}`);

// 2번
execFuncArgs`Test: ${() => console.log('called As Tagged Template Literal')}`;

1번과 2번의 출력을 예측해보자. 1번을 보면 중간에 함수를 콜백으로 넘긴거 같지만, backtick 를 이용해서 문자열 자체를 넘기는 형태가 되므로 인자는 오직 문자열 하나만 넘겨진다. 즉 execFuncArgs 함수는 아무일도 하지 않는다.

2번을 분석해보자. 2번의 결과를 일반 함수 호출로 변환시켜 보면 아래와 같이 된다.

execFuncArgs(['Test: ', ''], () => console.log('called As Tagged Template Literal'));

첫 번째 인자로는 문자열의 split up 결과인 배열이 들어가고 두 번째 인자로는 콜백함수가 전달된다. 따라서 execFuncArgs 는 콜백함수를 실행하고 called As Tagged Template Literal 이 출력된다.

일반함수로는 하지 못하는 문자열에 함수를 넣는 행위를 Tagged Template Literal 은 멋있게 할 수 있다. 이 특징을 잘 살린게 바로 Styled-Components 다.

styled-componets 를 하나 생각해보자.

const Button = styled.button`
    width: ${({ fullWidth }) => fullWidth ? '100%' : '40px'};
`;

위에서 학습한 내용을 생각해보면 위 코드를 금방 이해할 수 있다.

1. styled.button 은 하나의 함수다.

2. 함수를 일반적인 함수호출로 변환하면 아래와 같다.

   const Button = styled.button(['width: ', ''], {({ fullWidth => fullWidth ? '100%' : '40px'})})

Tagged Template Literal 문법을 사용했을 경우와 하지 않은 경우의 가독성, 퀄리티가 확연히 차이가 나는걸 볼 수 있다.