javascript 내부에서 CSS를 작성하고 관리하는 방식을 말한다.
일반적인 CSS를 따로 만들지 않고도 컴포넌트 내부에서 직접 스타일을 정의할 수 있다.
React, vue, Angular같은 라이브러리/프레임워크에서 많이 사용되고 있다.
장점
컴포넌트 기반 스타일링
스타일이 컴포넌트 내부에 정의되므로, 다른 컴포넌트와 스타일이 겹칠 위험이 줄어든다.
유지보수가 쉬워지고, 특정 컴포넌트만을 위한 스타일링이 가능하다
동적 스타일링 가능
javascript 변수를 사용하여 props, state등 변화에 따라 스타일을 동적으로 변경 할 수 있다.
const Button = styled.button`
background-color: ${props => (props.primary ? 'blue' : 'gray')};
`;코드의 재사용성 증가
스타일을 하나의 함수나 객체로 만들어 재사용이 가능하다.
const buttonStyle = css`
padding: 10px;
border-radius: 5px;
`;
스타일 충돌 방지
자동으로 고유한 클래스명을 생성하여 CSS 네이밍 충돌 문제를 해결한다.
CSS 전역 네임스페이스 관리가 필요 없어진다.
값의 공유
css와 javascript간의 상수나 함수를 공유 할 수 있다.
벤더 프리픽스
styled-component, emotion 등의 라이브러리는 -webkit, -moz- 같은 벤더 프리픽스를 자동으로 추가해준다.
크로스 브라우징 이슈 해결에 도움이 된다.
단점
런타임 성능 문제
styled-component, emotion 등 일부 라이브러리는 런타임에 스타일을 생성하여 성능의 저하가 발생 할 수 있다.
많은 스타일을 동적으로 적용하면 성능 문제가 발생 할 수 있다.
JIT컴파일 방식의 라이브러리를 사용하면 해결 할 수 있다.
빌드 번들 크기 증가
CSS-in-JS 라이브러리는 추가적인 Javascript 코드가 포함되어 번들의 크기가 추가될 수 있으며, 모바일 환경에서 불필요한 스타일이 포함되어 로딩 속도가 느려질 수 있다.
가상 선택자 및 미디어쿼리 사용 제한
인라인 스타일의 경우 :hover, nth-chlid 등의 가상 선택자를 사용 할 수 없다.
emotion, styled-component등 라이브러리를 사용하면 해결 할 수 있다.
러닝커브
기존 css 방식외에도 추가적으로 라이브러리 문법을 익혀야 하기 때문에 러닝커브가 발생한다.
종류
인라인 스타일
JSX의 style 속성을 사용하여 직접 CSS를 적용한다.
hover, nth-child와 같은 가상 선택자 사용이 불가능하다.
const style = {
backgroundColor: 'blue',
color: 'white',
padding: '10px',
borderRadius: '5px'
};
function Button() {
return <button style={style}>클릭</button>;
}Styled-component
styled-component 라이브러리를 통해 CSS를 직접 정의하고, 컴포넌트처럼 사용 할 수 있다.
props를 통해 조건부 스타일링이 가능하다.
동적 스타일을 적용 할 수 있으며, 스타일의 상속이 가능하다.
import styled from 'styled-components';
const Button = styled.button`
background-color: ${props => (props.primary ? 'blue' : 'gray')};
color: white;
padding: 10px;
border-radius: 5px;
`;
const StyledButton = styled(Button)`
color: red;
`;
function App() {
return (
<div>
<Button primary>Primary 버튼</Button>
<Button>기본 버튼</Button>
<StyledButton>스타일 상속 버튼</StyledButton>
</div>
);
}createGlobalStyle을 통해 전역스타일을 설정하고, ThemeProvider를 통해 다크모드 등의 테마설정이 가능하다.
import { ThemeProvider, createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
body {
background-color: ${(props) => props.theme.bgColor};
color: ${(props) => props.theme.textColor};
}
`;
const theme = {
bgColor: "#282c36",
textColor: "#ffffff",
};
export default function App() {
return (
<ThemeProvider theme={theme}>
<GlobalStyle />
<h1>Hello, world!</h1>
</ThemeProvider>
);
}SSR을 적용 할 수는 있지만 ServerStyleSheet등의 추가적인 설정이 필요하다.
emotion
emotion은 styled-component와 유사하지만 성능이 더 뛰어나고, 유연한 라이브러리이다.
styled-component와 유사한 styled API를 제공하고, 클래스 기반 CSS 스타일링을 지원한다.
styled-component와 유사한 방식으로 jsx내부에서 css props를 직접 사용하여 인라인 스타일을 적용하는 방식이다.
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
const buttonStyle = css`
background-color: blue;
color: white;
padding: 10px;
border-radius: 5px;
`;
function Button() {
return <button css={buttonStyle}>클릭</button>;
}
props를 사용한 동적 스타일링, 벤더프리픽스, ThemeProvider를 통한 테마 적용 등의 특징을 styled-component와 공유한다.
차별점
기존 인라인 방식은 style이 html인라인 스타일로 주입된다.
하지만 emotion은 이를 클래스로 변환해주기 때문에 기존에 사용불가능한 미디어쿼리, 가상/중첩 선택자가 사용 가능해진다.
css props를 통해 복잡한 스타일링이 가능해진다.
<div css={{color: "red"}}></div>
<div css={css`color: red`}></div>
<div css={style,color['red']}></div>
const color = {
red: css`
color:red;
`,
blue: css`
color:blue;
`
}emotion은 styled-component 와 달리 별도의 설정 없이 SSR에서도 동작한다.
