Emotion CSS
Emotion 은 CSS를 JS/TS로 '모듈화' 해서 재사용하고, props/state 기반으로 조건부 스타일을 안전하게 걸 수 있도록 도와준다.
1) 설치 / 세팅
npm i @emotion/react @emotion/styled@emotion/react : Emotion css 사용시 필수
@emotion/styled : styled 사용 시 import
폴더 구조 및 이유
컴포넌트-코로케이션
컴포넌트 폴더 안에 파일을 같이 둔다.
Button/
Button.tsx
styles.tsstyles.ts: Emotion css export만 맡는다.- 다른 폴더 혹은 더 상위 폴더에 styles 파일을 둘 수도 있지만, 유지보수 및 관리 차원에서 한 컴포넌트당 하나의 styles.ts 파일을 추천한다.
css + css prop (styles.ts) 사용
일반적인 css 사용법과 비슷해 보이지만,
스타일을 함수/배열로 조합해서 바로 적용할 수 있어 로직의 가독성 향상을 기대할 수 있다.
Button/styles.ts 파일 예시
import { css } from "@emotion/react";해당 import 문을 상단에 정의 후,
export const button = css`
padding: 12px;
border: 1px solid #ddd;
`;해당 형식으로 아래에 css를 작성한다.
Button/Button.tsx 파일 예시
/** @jsxImportSource @emotion/react */
import * as s from "./styles";항상 상단에 해당 import 문 두 줄을 넣는다.
같은 폴더 내 styles 파일을 가져와 별칭을 붙여 사용하기 때문에 필요하다.
export default function Button() {
return <div css={s.button}>BUTTON</div>;
}Button 컴포넌트쪽에서 className처럼 사용 가능하다.
styled 컴포넌트
클래스명 + 스타일 파일 + 연결을 Emotion이 컴포넌트 단위로 자동화 해주는 방식.
CSS를 컴포넌트로 포장해서 재사용성이 좋다.
- 컴포넌트 자체가 스타일 덩어리(버튼/인풋/칩/카드)일 때 유리하다.
Button/styles.ts 파일 예시
import styled from "@emotion/styled";해당 import 문을 상단에 정의 후,
export const Btn = styled.button`
padding: 12px;
border: 1px solid #ddd;
`;- 여기서 styled.button의 button은
<button></button>을<S.Btn></S.Btn>으로 사용할 수 있도록 만들어준다.
// 예시
export const Container = styled.div`...`;
export const Header = styled.div`...`;
export const LiveButton = styled.button`...`;해당 컴포넌트만 사용하면, 요소와 CSS가 이미 포함된 상태에서 깔끔하게 로직 작성이 가능하다.
Button/Button.tsx 파일 예시
// S = 대문자
/** @jsxImportSource @emotion/react */ -> styled 방식은 css prop을 사용하지 않아 빼도 됨
import * as S from "./styles";굳이 대문자 표식을 할 필요는 없으나,
styled 컴포넌트들은 PascalCase로 export한다고 가정했을 때, 예시문이다.
export default function Button() {
return <S.Btn>BUTTON</S.Btn>;
}해당 방식으로 깔끔하게 CSS가 적용된다.
스타일링 방식 4가지 비교
- 일반 CSS (className + .css 파일)
- 장점: 가장 표준적, 어디서나 동일하게 동작
- 단점: 규모가 커지면 네이밍/전역 충돌/미사용 CSS관리 비용 커짐,
상태 조합 가독성 떨어짐
- Tailwind CSS (유틸리티 클래스 조합)
- 장점: CSS 파일 작성 거의 없이 빠르게 UI 구현, 디자인 토큰(간격/색/폰트) 통일이 쉬움, 전역 충돌 적음
- 단점: className이 길어져 JSX 가독성이 떨어질 수 있고, 팀 컨벤션(추상화 기준/컴포넌트화)이 없으면 난잡해짐
- Emotion css + css prop (styles.ts + css 배열 조합)
- 장점: css={[base, cond && extra]}로 조건부 스타일이 깔끔함, 스타일/로직 분리로 PR 리뷰·충돌 감소, 컴포넌트 단위로 영향 범위가 좁음
- 단점: 프로젝트 설정에 따라 css prop 세팅(pragma 등)이 필요할 수 있음
- Emotion styled (스타일 포함 컴포넌트)
- 장점:
<S.Button />처럼 캡슐화되어 재사용/확장(variant)에 강함, props 기반 동적 스타일이 자연스러움 - 단점: 작은 레이아웃 조각까지 전부 styled로 만들면 컴포넌트 정의가 과밀해질 수 있어 css + css prop과 적절한 혼용이 필요
- 장점:
