emotion-js/emotion

어떤 프로젝트인가요?

핵심 기능

• 01문자열이나 객체 문법으로 스타일을 작성할 수 있습니다.
• 02css prop과 styled-components 스타일 API를 제공합니다.
• 03명시도 문제를 피하는 예측 가능한 스타일 조합을 지원합니다.
• 04디버깅을 돕는 소스 맵과 라벨을 제공합니다.
• 05프로덕션에서 스타일을 적극적으로 캐싱합니다.
• 06추가 최적화를 위한 선택 사항인 Babel 플러그인을 제공합니다.

활용 사례

• props에 따라 스타일이 바뀌거나 동적 스타일을 사용하는 React 애플리케이션을 꾸미는 경우.
• 조합 가능한 스타일을 활용해 재사용 가능한 컴포넌트 라이브러리를 만드는 경우.
• 클래스 기반 스타일시트에서 벗어나 컴포넌트와 스타일을 함께 관리하는 방식으로 전환하는 경우.

빠른 시작

1. 1

   npm으로 코어 패키지를 설치합니다

   npm install --save @emotion/react
2. 2

   Emotion에서 jsx를 가져와 컴포넌트에서 css prop을 사용합니다

사용 전 알아둘 점

• !Babel 플러그인은 선택 사항이지만 일부 기능에는 필요합니다.

토픽

자주 묻는 질문

emotion은(는) 무엇인가요?

문자열 또는 객체 스타일과 예측 가능한 스타일 조합을 지원하는 고성능의 유연한 CSS-in-JS 라이브러리입니다. Emotion을 사용하면 문자열이나 객체 문법으로 JavaScript에서 컴포넌트 스타일을 작성할 수 있습니다. 스타일은 런타임에 생성되어 CSS로 적용되므로, 별도의 스타일시트를 관리하지 않고도 props와 state에 따라 모양을 바꿀 수 있습니다.

emotion은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

emotion은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

emotion은(는) 아직 유지보수되고 있나요?

6개월 이내 업데이트. emotion의 마지막 커밋은 2026년 8월 28일입니다.

emotion은(는) 어디에 사용할 수 있나요?

props에 따라 스타일이 바뀌거나 동적 스타일을 사용하는 React 애플리케이션을 꾸미는 경우. 조합 가능한 스타일을 활용해 재사용 가능한 컴포넌트 라이브러리를 만드는 경우. 클래스 기반 스타일시트에서 벗어나 컴포넌트와 스타일을 함께 관리하는 방식으로 전환하는 경우.

emotion는 어떻게 설치하나요?

npm으로 코어 패키지를 설치합니다: npm install --save @emotion/react Emotion에서 jsx를 가져와 컴포넌트에서 css prop을 사용합니다

emotion은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/emotion-js/emotion