웹 컴포넌트 스타일링 관리 : CSS-in-JS

CSS-in-JS는 "스타일을 JavaScript 안에서 직접 작성하고, 컴포넌트에 함께 붙이는 방식"

 

 

CSS-in-JS는 JavaScript안에 CSS를 작성하는 방식이다.

전통적으로는 .css파일에 스타일을 작성해서 HTML이나 React 컴포넌트에서 className으로 불러썼지만,

CSS-in-JS 스타일을 JS 코드 안에 넣어서 함께 관리할 수 있게 해준다.

 

 

왜 쓰는가?

 

• 컴포넌트 기반 스타일링
  → 특정 컴포넌트에만 적용되는 스타일을 함께 묶을 수 있어
  → 스타일 충돌 걱정 ↓
• 동적 스타일 적용
  → props나 상태(state)에 따라 동적으로 스타일 바꾸기 쉬움
• JavaScript 로직과 스타일을 한 파일에서 관리
  → 유지보수성 ↑, 협업에 유리

 

 

 

🧰 주요 라이브러리

라이브러리	설명
styled-components	가장 널리 쓰이는 CSS-in-JS 도구
emotion	빠르고 유연한 스타일링 라이브러리
@vanilla-extract/css	타입 안전한 CSS-in-JS
Stitches	빠르고 경량화된 CSS-in-JS

 

 

 

2. Emotion

emotion은 React에서 스타일을 JavaScript로 작성할 수 있게 해주는 CSS-in-JS 라이브러리

 

 

• 빠른 성능 (컴파일 기반)
• styled-components처럼 styled API 제공
• css 함수로 유연한 스타일링 가능
• TypeScript 지원이 우수함

 

 

 

 

🔧 예시: styled-components (대표적인 CSS-in-JS 라이브러리)

import styled from 'styled-components';

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

export default function App() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Default Button</Button>
    </div>
  );
}

 

 

🔄 전통적인 방식과 비교

 

기준	전통 CSS 방식	CSS-in-JS 방식
파일 구조	JS와 CSS 분리	JS 안에 CSS 포함
클래스 이름 충돌	충돌 위험 있음	자동으로 고유 클래스 생성
동적 스타일	어렵거나 우회 필요	JavaScript 로직으로 쉽게 처리
코드 분리도	명확히 분리됨	논리와 스타일이 섞임