Emotion의 개념
Emotion은 CSS-in-JS 라이브러리 중 하나로, React와 같은 프론트엔드 프레임워크에서 스타일을 작성할 때 사용됩니다.
Emotion의 특징
1. 런타임 성능
Emotion은 런타임 성능이 뛰어나며, 스타일이 필요할 때만 생성하여 최적화된 결과를 제공합니다.
2. 유연성
다양한 방법으로 스타일을 적용할 수 있습니다. css 함수, styled API, 또는 컴포넌트의 props를 통한 스타일링이 가능합니다.
3. 브라우저 호환성
Emotion은 브라우저 호환성을 위해 필요한 CSS 접두사를 자동으로 추가합니다.
4. SSR (Server Side Rendering)
Emotion은 SSR을 지원하여 초기 로딩 시 스타일이 적용된 HTML을 제공합니다.
5. 재사용성
Emotion은 스타일을 컴포넌트 단위로 정의하여, 재사용성과 유지보수성이 높습니다.
Emotion의 설치와 사용법
Emotion/React
설치
$ npm i --save @emotion/react사용법
import { css } from '@emotion/react';
const style = css`
color: hotpink;
font-size: 20px;
`;
const MyComponent = () => {
return <div css={style}>Hello, Emotion!</div>;
};Emotion/Styled
Styled API를 사용하여 스타일드 컴포넌트를 만들 수 있습니다.
설치
$ npm i --save @emotion/styled사용법
import styled from '@emotion/styled';
const StyledDiv = styled.div`
color: hotpink;
font-size: 20px;
`;
const MyComponent = () => {
return <StyledDiv>Hello, Emotion!</StyledDiv>;
};props를 통한 동적 스타일 변경
import styled from '@emotion/styled';
const StyledButton = styled.button`
background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
color: white;
padding: 10px;
`;
const MyComponent = () => {
return (
<>
<StyledButton primary>Primary Button</StyledButton>
<StyledButton>Default Button</StyledButton>
</>
);
};Emotion Babel
설치
$ npm i @emotion/babel-pluginBabel 설정
// .babelrc
{
"plugins": ["@emotion"]
}Emotion Vanilla
설치
$ npm i @emotion/css사용법
import { css } from '@emotion/css';
const style = css`
color: hotpink;
font-size: 20px;
`;
const element = document.createElement('div');
element.className = style;
element.textContent = 'Hello, Emotion Vanilla!';
document.body.appendChild(element);동적 스타일링 적용법
import { css } from '@emotion/css';
const buttonStyle = (primary) => css`
background-color: ${primary ? 'blue' : 'gray'};
color: white;
padding: 10px;
`;
const button = document.createElement('button');
button.className = buttonStyle(true);
button.textContent = 'Primary Button';
document.body.appendChild(button);Emotion의 단점
1. 초기 학습
CSS-in-JS 패턴이 익숙하지 않다면 초기 학습에 많은 시간이 필요합니다.
2. 파일 크기
Emotion 사용 시 추가 라이브러리와 종속성이 필요해, 애플리케이션 번들 크기가 커집니다.
3. 디버깅 어려움
스타일이 JavaScript 코드에 포함되어 있어, CSS 파일과의 분리가 어려워 디버깅이 복잡해집니다.
Emotion과 비교
vs. Tailwind CSS
<div class="text-hotpink text-20">
Hello, Tailwind!
</div>Tailwind CSS는 미리 정의된 클래스를 조합하여 스타일을 적용합니다. CSS 대신 HTML 요소 클래스를 추가해 스타일링 합니다.
때문에, Tailwind CSS는 빠른 프로토타입 제작이 가능하며, CSS 파일을 별도로 관리할 필요 없이 클래스의 조합으로 다양한 스타일을 쉽게 적용할 수 있고 일관된 디자인 시스템 유지가 용이한 반면,
Emotion에 비해 동적 스타일링과 조건부 스타일이 불리하고, 유지보수성이 낮습니다.
vs. Radium
import Radium from 'radium';
const styles = {
base: {
color: 'hotpink',
fontSize: '20px',
':hover': {
color: 'blue',
},
},
};
const MyComponent = () => <div style={styles.base}>Hello, Radium!</div>;
export default Radium(MyComponent);Radium은 React에 특화된 스타일링 라이브러리로, 인라인 스타일을 기반으로 미디어 쿼리와 Hover 효과를 지원합니다.
때문에, Radium은 React 최적화와 빠른 스타일링 그리고 CSS 기능의 쉬운 사용과 크기가 작은 반면,
Emotion에 비해 성능이 떨어지고, 테마를 지원하지 않습니다.
결론
Emotion은 크기가 크고, 학습이 어렵지만 Server Side Rendering을 포함한 다양한 기능일 지원합니다.
가벼운 크기의 프로젝트에서는 다른 CSS가 용이할지 모르지만,
규모가 있는 프로젝트에서는 Emotion을 학습하고 활용한다면 더욱 많은 기능을 사용할 수 있을 것입니다.
