CSS

전통적인 CSS는 ".css" 확장자를 가진 별도의 스타일시트 파일을 생성한다.

구조와 스타일을 분리된 파일에 저장하는 방식이다.

이렇게 하면 스타일이 적용될 범위를 지정하지 않아서 스타일 충돌이 일어날 위험이 있고, 범위를 지정해도 어떤 스타일이 어떻게 적용될 선택자를 통해서 스타일이 적용될 범위를 지정하는데, 어떤 스타일이 어떻게 적용될지 제대로 예측하기 어려울 수 있다. 

<예시>

/* style.css */
#card {
    width: 300px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid green;
}

#btn {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid green;
}

(#은 아이콘 선택자.)

CSS-in-JS

CSS-in-JS는 자바스크립트 코드에서 CSS를 작성하는 방식을 말한다. 웹 애플리케이션에서  컴포넌트 단위로 스타일을 작성하여 스타일 충돌을 방지하고, 동적 스타일링을 지원하기 위해 등장했다. 2014년에 처음 소개됨.

이후 이 방식을 적용한 많은 라이브러리가 등장했는데 대표적으로 styled-components와 Emotion이 있다.

<특징>

• 스타일링의 범위가 한정되어 있어 스타일 충돌이 일어날 가능성이 줄어든다.
• 스타일이 컴포넌트와 함께 위치해서 가독성이 향상되었다. 
• state, props, API 데이터 기반의 동적 스타일링 용이하다.
• CSS-in-JS 라이브러리는 스타일을 동적으로 생성하므로, 미리 컴파일된 CSS와 비교했을 때 초기 로딩 시간이 조금 길 수 있다.

<예시>

import React from 'react';

function Card() {
    const cardStyle = {
        width: '300px',
        padding: '20px',
        borderRadius: '10px',
        border: '1px solid green'
    };
    const btnStyle = {
        padding: '10px',
        borderRadius: '5px',
        border: '1px solid green'
    };

    return (
        <div style={cardStyle}>
            <img src="https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="gfg-logo" />
            <p>GeeksforGeeks Interactive Live and Self-Paced Courses to help you enhance your programming.</p>
            <button style={btnStyle}>Explore Now</button>
        </div>
    );
}

export default Card;

▷ 초기 CSS-in-JS
처음에는 빌드 타임(Build Time)에서만 스타일링을 결정하는 라이브러리들이 있었다. 빌드 타임에서는 모든 스타일을 미리 계산하고 적용할 수 있지만, 동적인 스타일링을 하는 데 한계가 있었다. 이를 해결하기 위해 런타임 CSS-in-JS가 등장했다.

▷ 런타임 CSS-in-JS
런타임 CSS-in-JS는 props가 변할 때마다 스타일을 동적으로 생성하여, 동적인 스타일링이 가능하게 한다. 빌드 시점에서 모든 스타일이 결정되지 않고, 런타임에서도 스타일을 생성한다. 이는 동적인 스타일을 쉽게 적용할 수 있게 하지만, 복잡한 스타일 계산이 필요할 때 런타임 오버헤드가 발생할 수 있다.

▷ 제로 런타임 CSS-in-JS (Zero-runtime CSS-in-JS)
이 문제를 해결하기 위해 제로 런타임 CSS-in-JS가 등장했다. 제로 런타임 CSS-in-JS는 런타임에서 동적으로 스타일을 생성하지 않고, 빌드 시점에서 모든 스타일을 미리 계산하여 적용하는 방식이다. 이 접근 방식은 런타임 오버헤드를 줄이고 성능을 최적화할 수 있다.