css in JS vs module.css

32. css in js vs module.css에 대해 설명할 수 있습니다.
    • 답변)
      • 의도:
        • 지원자가 CSS-in-JS와 CSS Module의 차이점과 장단점을 이해하고 있는지 평가.
      • 팁:
        • CSS-in-JS와 CSS Module의 개념을 설명하세요.
        • 두 방법의 장단점을 설명하세요.
        • CSS-in-JS와 CSS Module을 사용하는 예제를 떠올려 보세요.
      • 모범답안:
        • CSS-in-JS는 JavaScript 파일 내에 CSS를 작성하는 방법으로, styled-components, Emotion 등이 있습니다.
        • CSS Module은 CSS 파일을 모듈화하여 클래스 이름의 충돌을 방지하는 방법입니다.
        • CSS-in-JS는 동적 스타일링에 유리하며, CSS Module은 기존 CSS 작성 방식과 호환성이 좋습니다.

---

CSS-in-JS와 CSS Modules에 대해 자세히 설명해드리겠습니다.

CSS-in-JS

정의: JavaScript 코드 안에서 직접 CSS를 작성하는 방식입니다.
대표적인 라이브러리:

styled-components
Emotion
JSS

주요 특징:
javascriptCopy// styled-components 예시
const StyledButton = styled.button background-color: ${props => props.primary ? 'blue' : 'white'}; color: ${props => props.primary ? 'white' : 'black'}; padding: 10px 20px; border-radius: 4px;;
장점:

동적 스타일링이 용이합니다 - props나 상태에 따른 스타일 변경이 쉽습니다.
JavaScript 변수와 함수를 직접 스타일에 활용할 수 있습니다.
컴포넌트별로 스타일이 캡슐화되어 스타일 충돌이 없습니다.
CSS-in-JS는 필요한 스타일만 로드하여 성능 최적화에 도움이 됩니다.

단점:

런타임 오버헤드가 있을 수 있습니다.
별도의 라이브러리 설치가 필요합니다.
기존 CSS 개발자들에게 러닝커브가 있을 수 있습니다.
CSS Modules

정의: CSS 파일을 모듈화하여 사용하는 방식으로, 컴파일 시점에 고유한 클래스명을 생성합니다.

예시:
cssCopy/ Button.module.css /
.button {
background-color: white;
padding: 10px 20px;
border-radius: 4px;
}

.primary {
background-color: blue;
color: white;
}
javascriptCopy// Button.js
import styles from './Button.module.css';

function Button({ primary }) {
return (
<button className={${styles.button} ${primary ? styles.primary : ''}}>
Click me

);
}
장점:

기존 CSS 문법을 그대로 사용할 수 있습니다.
컴파일 시점에 고유한 클래스명이 생성되어 스타일 충돌을 방지합니다.
별도의 라이브러리 설치가 필요 없습니다 (Create React App 등에 내장).
빌드 시점에 처리되어 런타임 오버헤드가 없습니다.

단점:

동적 스타일링이 CSS-in-JS에 비해 제한적입니다.
전역 스타일과 혼용할 때 관리가 복잡할 수 있습니다.
CSS 파일과 JS 파일을 별도로 관리해야 합니다.

사용 케이스:

CSS-in-JS:

동적 스타일링이 많이 필요한 경우
컴포넌트 기반 개발에 집중하는 경우
테마 시스템이 필요한 경우

CSS Modules:

기존 CSS 개발 방식을 선호하는 경우
간단한 스타일링이 필요한 경우
빌드 시간 최적화가 중요한 경우

---

위 방식 둘 다 서버컴포넌트와 호환이 안 돼? 아니면 css in js만 안돼?EditNext.js의 Server Components에서는:

CSS Modules

✅ 완벽하게 호환됩니다
서버 컴포넌트에서 직접 사용 가능

jsxCopy// page.js (Server Component)
import styles from './styles.module.css'

export default function Page() {
return

}

CSS-in-JS

❌ 대부분의 런타임 CSS-in-JS 라이브러리는 서버 컴포넌트와 호환되지 않습니다
styled-components, emotion 등은 기본적으로 작동하지 않습니다
이유: 서버 컴포넌트는 JavaScript 런타임이 없는 환경에서 실행되기 때문입니다

하지만 CSS-in-JS를 사용하는 방법이 아예 없는 것은 아닙니다:

'use client' 선언하기

jsxCopy'use client'
// 클라이언트 컴포넌트에서는 CSS-in-JS 사용 가능
import styled from 'styled-components'

Zero-runtime CSS-in-JS 라이브러리 사용

styled-components 대신 styled-jsx나 vanilla-extract 같은 빌드타임 CSS-in-JS 라이브러리를 사용할 수 있습니다
이런 라이브러리들은 빌드 시점에 정적 CSS를 생성하므로 서버 컴포넌트와 호환됩니다

따라서 서버 컴포넌트를 많이 사용할 계획이라면:

CSS Modules 사용을 우선 고려하거나
Zero-runtime CSS-in-JS 라이브러리 사용을 검토하는 것이 좋습니다