Styling Library: Emotion

JDesignSystem에서는 효율적이고 강력한 스타일링을 위해 Emotion을 CSS-in-JS 라이브러리로 채택하였습니다.

왜 Emotion인가요?

1. CSS-in-JS

   Emotion은 CSS-in-JS 방식을 지원하며, 이는 프로젝트에서 많은 이점을 제공합니다. 이 방법은 CSS 스타일을 JavaScript 파일 내에 직접 작성할 수 있게 해줌으로써, 스타일과 컴포넌트 로직을 효율적으로 관리할 수 있게 합니다.

2. 유연한 스타일링 ( CSS props )

   Emotion은 스타일 정보를 컴포넌트의 prop 처럼 직접 전달할 수 있습니다. 디자인 시스템의 특성상 사용자가 설정한 프로퍼티에 따라 다양하게 디자인을 바꿔줘야 하는데, 이 때 유연하게 스타일링을 조작해줄 수 있다는 장점이 있습니다. 또한 스타일링이 빌드과정이 아닌 런타임 환경에서 작동하기 때문에 props가 동적으로 변경될 때마다 런타임에서 스타일링도 동적으로 변경되게 됩니다.

3. 브라우저 Vendor Prefix 자동 설정

   webkit, moz, ms 등 브라우저에 맞는 벤더 프리픽스를 자동으로 설정해줘, CSS의 특정 속성이 모든 브라우저에 안정적으로 동작하게 됩니다. 이로 인해, CSS를 작성하는 과정이 훨씬 간결하고 직관적이게 됩니다.

4. SSR 지원

   Emotion은 SSR을 지원해 페이지를 렌더링하는데 필요한 모든 데이터와 HTML 마크업을 서버에서 생성한 후 클라이언트에 전달합니다. 이로 인해 사용자는 빠르게 완전히 렌더링된 페이지를 볼 수 있게 되어 사용자 경험에 도움이 됩니다.

5. 스타일 정보 최적화

   Emotion은 CSS prop에 전달된 스타일 정보를 해석하여 실제 CSS 코드를 생성하게 됩니다. 이 과정에서 스타일 정보를 최적화하여 불필요한 스타일 설정이 최종 CSS 코드에 포함되지 않도록 만들어주기 때문에 웹 성능에 도움이 됩니다.

타 CSS-in-JS(ex. styled-components) 에 비해 조금 더 가볍고 빠른 퍼포먼스를 가지고 있습니다.

사용예시

쓸까말까

.