프론트엔드 : 💝Emotion

공부공부

---

💝Emotion

CSS-in-JS library

JS 로 css 스타일을 작성하도록 설계된 라이브러리

Emotion – Introduction

GitHub - emotion-js/emotion: 👩‍🎤 CSS-in-JS library designed for high performance style composition

Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.

 

 

Emotion 소개 및 사용하기

---

 

• 성능 최적화: Emotion은 런타임 동안 필요한 최소한의 CSS만을 생성하고, 가능한 많은 스타일을 정적으로 컴파일합니다.
• 강력한 동적 스타일링: 자바스크립트 객체나 함수를 이용해 조건부 스타일링을 쉽게 구현할 수 있으며, 프롭스나 상태에 따라 스타일을 동적으로 변경할 수 있습니다.
• 서버 사이드 렌더링 지원: Emotion은 서버 사이드 렌더링(SSR)을 완벽하게 지원하여 초기 로드 시 스타일이 깨지는 현상 없이 페이지를 빠르게 로딩할 수 있도록 돕습니다.
• 컴포저블 스타일링: 스타일을 재사용하기 쉽게 만들어주고, styled 컴포넌트를 사용하여 기존 컴포넌트를 간편하게 확장할 수 있습니다.

CSS-in-JS

자바스크립트를 사용하여 CSS 스타일링을 처리하는 기법

자바스크립트 파일 내에 스타일 정보를 직접 작성함으로써, 스타일과 컴포넌트 로직을 한 곳에서 관리할 수 있게 해줌

 

서버 사이드 렌더링(SSR)

웹 애플리케이션의 초기 로딩 성능을 개선하고, 검색 엔진 최적화(SEO)를 향상시키기 위한 기술

클라이언트 사이드 렌더링(CSR)과 대비되는 개념으로, 웹 페이지의 HTML을 서버에서 미리 생성하여 사용자의 브라우저로 전송하는 방식

---

import { css } from '@emotion/react'

const color = 'white'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)

 

이렇게~CSS-in-JS

 

졸린데

공식문서를 내일 더 자세히 읽어 보자.

---

suapc 일러스트 합류~