styled-components와 Tagged Template Literals styled-components는 어떻게 style을 만들까

"styled-components"는 자바스크립트에서 CSS 스타일링을 위한 매우 인기있는 라이브러리입니다. 이 라이브러리의 핵심 기능 중 하나는 Tagged Template Literals라는 ES6의 템플릿 리터럴 기능을 활용하는 것입니다.

styled-components와 Tagged Template Literals

먼저 Tagged Template Literals에 대해 간단하게 설명하자면, 템플릿 리터럴은 자바스크립트 문자열을 생성할 때 백틱(```)을 사용하는 방법입니다. Tagged Template Literal은 템플릿 리터럴 앞에 함수를 위치시켜 해당 문자열을 처리하는 방식입니다.

예시:

function tag(strings, ...values) {
    return strings.reduce((result, string, i) => `${result}${string}${values[i] || ''}`, '');
}

const name = 'World';
const message = tag`Hello, ${name}!`;
console.log(message);  // "Hello, World!"

styled-components에서의 활용

styled-components는 이 Tagged Template Literal의 원리를 활용해 CSS 스타일을 정의합니다.

예시:

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
`;

// 사용 예:
// <Button primary>Click Me</Button>

위 예제에서 styled.button은 실제로 함수이며, 이 함수는 템플릿 리터럴에 포함된 문자열과 변수들을 인자로 받아 처리합니다. 따라서 위의 Button 컴포넌트는 primary라는 prop에 따라 배경색을 결정하는 스타일을 갖게 됩니다.

동작 원리

1. styled-components는 태그된 템플릿 리터럴을 통해 전달된 문자열(CSS 코드)와 변수(스타일링 값)를 받습니다.
2. 이를 처리하여 동적으로 스타일을 생성합니다.
3. 해당 스타일을 가진 React 컴포넌트를 생성하고, 실제 DOM 요소에 적용할 클래스 이름을 동적으로 생성하여 할당합니다.
4. 이렇게 생성된 컴포넌트는 스타일이 적용된 상태로 렌더링됩니다.

결과

 

결과적으로, styled-components를 사용하면 React 컴포넌트 내에서 직관적으로 스타일을 정의하고 관리할 수 있게 됩니다. 그리고 이는 Tagged Template Literals 덕분에 가능한 것입니다.