1. CSS-in-JS란?
CSS-in-JS는 React나 다른 자바스크립트 프레임워크에서 스타일링을 할 때, CSS 코드를 자바스크립트 코드 안에 작성하는 기술입니다.CSS-in-JS의 핵심 개념은 스타일을 자바스크립트 객체로 만들어 컴포넌트의 props로 전달하는 것입니다.- 이러한 자바스크립트 객체는 스타일 속성과 그 값들을 표현하는데, 키(key)와 값을 직접 정의할 수 있습니다. 이는 CSS의 클래스(class)와 선택자(selector)를 정의하는 것과는 다른 방식입니다.
2. CSS-in-JS libararies
Styled Components
Styled Components는 React에서 사용되는CSS-in-JS라이브러리로, 컴포넌트 스타일링을 더욱 쉽고 간편하게 만들어주는 도구입니다.Styled Components를 사용하면 컴포넌트와 스타일을 하나의 파일에서 정의할 수 있습니다.- 컴포넌트의 태그와 스타일을 한 번에 정의합니다.
- 각각의 컴포넌트들의 스타일은 브라우저에서 렌더링 될 때엔 임의의 독립적인 클래스명이 할당되어 적용됩니다.
- 예시
import styled from "styled-components";
const LinkButton = styled.button`
cursor: pointer;
text-align: center;
border-radius: 0.8rem;
padding: 1.6rem 0;
width: 100%;
font-size: 1.8rem;
font-weight: 600;
color: var(--gray6);
background: linear-gradient(90deg, var(--primary), var(--light-primary));
`;
export default LinkButton;
CSS Modules
CSS Modules는 React나 다른 자바스크립트 프레임워크에서 스타일링을 할 때, CSS 파일을 모듈화하는 기술입니다.CSS Modules는 CSS 파일을 로컬 스코프를 갖는 모듈로 변환하여, 전역적으로 스타일이 적용되는 것을 방지합니다.- 예시
/* styles.module.css */
.button {
background-color: blue;
color: white;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid blue;
border-radius: 3px;
}
.primary {
background-color: white;
color: black;
}
/* Button.js */
import styles from './styles.module.css';
function Button(props) {
const primaryClass = props.primary ? styles.primary : '';
return (
<button className={`${styles.button} ${primaryClass}`}>
{props.children}
</button>
);
}Styled JSX
Styled JSX는Next.js에서 지원하는CSS-in-JS방식의 스타일링 기술입니다.Styled JSX를 사용하면 자바스크립트 파일 안에 CSS 스타일을 선언할 수 있으며,CSS Modules와 유사한 방식으로 로컬 스코프를 지원합니다.Styled JSX에서는 style 속성을 이용하여 스타일을 선언합니다. 이 때, CSS 문법을 그대로 사용할 수 있습니다.- 예시
function Button() {
const primary = true;
return (
<button>
Click me!
<style jsx>{`
button {
background-color: ${primary ? 'blue' : 'white'};
color: ${primary ? 'white' : 'black'};
}
`}</style>
</button>
);
}
Emotion
Emotion은 React에서 사용하는CSS-in-JS라이브러리 중 하나로, 스타일링에 필요한 CSS를 자바스크립트로 작성할 수 있도록 지원합니다.- Emotion에서는 CSS를 자바스크립트 객체로 정의할 수 있습니다. 이 객체에서는 CSS 속성 이름을 camelCase로 작성하며, 값을 문자열로 전달합니다.
- 예시
import { css } from '@emotion/react';
function Button() {
const buttonStyle = css`
background-color: blue;
color: white;
`;
return (
<button css={buttonStyle}>
Click me!
</button>
);
}
3. CSS-in-JS의 장점
- 컴포넌트 기반 스타일링: CSS-in-JS는 컴포넌트 기반 스타일링을 통해 코드의 가독성과 유지 보수성이 높아지고 각 컴포넌트의 스타일이 다른 컴포넌트에 영향을 주지 않습니다.
- 동적 스타일링: CSS-in-JS를 사용하면 JavaScript를 사용하여 스타일을 동적으로 변경할 수 있어, 조건부 스타일링 및 인터랙티브 웹 애플리케이션 개발에 유용합니다.
- 동적 스타일링을 통해 테마를 쉽게 적용할 수 있습니다.
- 빠른 스타일링: CSS-in-JS를 사용하면 스타일을 빠르게 작성할 수 있습니다.
- Vendor Prefix 자동 생성: CSS-in-JS를 사용하면 벤더 접두사를 자동으로 생성할 수 있어, 브라우저 호환성 문제를 해결하는 데 도움이 됩니다.
- 재사용성: CSS-in-JS를 사용하면 스타일된 컴포넌트를 재사용할 수 있어, 코드의 반복을 줄이고 일관성을 유지하는 데 도움이 됩니다.
4. CSS-in-JS의 단점
- 구현 복잡성: CSS-in-JS를 구현하는 것은 기존 CSS보다 더 복잡할 수 있습니다.
- 성능 문제: CSS-in-JS는 스타일을 동적으로 생성하기 때문에 브라우저에서 속도가 느려질 수 있습니다.
- SEO 문제: 일부 검색 엔진은 JavaScript를 실행하지 못할 수 있어, SEO 문제를 야기할 수 있습니다.
- 디버깅: CSS-in-JS를 사용하면 스타일이 JavaScript 코드 안에 포함되기 때문에 디버깅이 어려울 수 있습니다.
- 개인적으로는 css 자동완성 기능을 쓸 수 없어서 불편함을 느꼈는데, 이는 외부 플러그인으로 해결할 수 있는 것 같습니다.
- 브라우저 캐시 문제: CSS-in-JS를 사용하면 브라우저 캐시 문제가 발생할 수 있어, 새로운 스타일이 적용되지 않을 수 있습니다.
CSS-in-JS를 사용하면 스타일 정보가 JavaScript 코드와 함께 번들되어 전달되기 때문에, 캐시된 CSS 파일을 사용하는 일반적인 방식과는 달리 브라우저에서 스타일 정보를 업데이트하는 방식이 달라집니다.- 이 때, CSS-in-JS를 사용하는 경우 스타일 정보가 동적으로 생성되므로, 캐시된 파일을 사용하더라도 새로운 스타일 정보가 적용되지 않을 수 있습니다.
- 컴포넌트 크기: CSS-in-JS를 사용하면 컴포넌트의 크기가 커질 수 있습니다.
Reference
job's done