[CSS] CSS-in-JS

 

CSS-in-JS

CSS-in-JS는 JavaScript를 사용하여 스타일을 컴포넌트에 직접 작성하는 기술이다. 이는 CSS의 전역 네임스페이스 문제를 해결하고, 컴포넌트 기반 개발에 더 적합한 스타일링 방법을 제공한다.

 

Styled-components

가장 널리 사용되는 CSS-in-JS 라이브러리다.

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? 'palevioletred' : 'white'};
  color: ${props => props.primary ? 'white' : 'palevioletred'};
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const PrimaryButton = () => (
  <Button primary>Primary Button</Button>
);

 

Emotion

높은 성능과 유연성을 제공한다.

import { css } from '@emotion/react';

const style = css`
  background-color: #eee;
  padding: 20px;
  &:hover {
    background-color: #ccc;
  }
`;

const Component = () => (
  <div css={style}>
    This has a gray background.
  </div>
);

 

 

장점

동적 스타일링

const DynamicText = styled.p`
  color: ${props => props.error ? 'red' : 'black'};
  font-size: ${props => props.size}px;
`;

 

 

스코프 격리

각 컴포넌트의 스타일은 완전히 격리되어 있어 스타일 충돌이 없다.

 

Dead Code Elimination

사용하지 않는 스타일은 자동으로 제거된다.

 

테마 지원

const Button = styled.button`
  background: ${props => props.theme.primary};
  color: ${props => props.theme.textColor};
`;

 

 

단점과 주의사항

번들 크기 증가

CSS-in-JS 라이브러리는 런타임 오버헤드를 추가한다.

 

초기 렌더링 지연

JavaScript가 로드되고 실행되어야 스타일이 적용된다.

 

서버 사이드 렌더링 복잡성

import { ServerStyleSheet } from 'styled-components';

const sheet = new ServerStyleSheet();
try {
  const html = renderToString(sheet.collectStyles(<App />));
  const styleTags = sheet.getStyleTags();
} finally {
  sheet.seal();
}

 

성능 최적화 전략

정적 스타일 추출

가능한 경우 빌드 시점에 CSS를 추출한다.

 

코드 스플리팅

const StyledComponent = React.lazy(() => import('./StyledComponent'));

 

캐싱 전략

const StyledButton = React.memo(styled.button`
  /* styles */
`);

 

CSS-in-JS와 기존 CSS 방식의 비교

	CSS in JS	CSS
스코프	지역	전역
동적 스타일링	쉬움	어려움
성능	약간의 오버헤드	더 나은 성능
유지보수	컴포넌트와 함께	별도 관리