안녕하세요, 대학생 웹 프론트엔드 개발자 가든입니다.
이번주부터 프론트엔드 개발자 스터디 우당탕탕 도서관 2기에 합류하게 되어 스터디를 진행했는데요!
첫 주차 주제는 "css 라이브러리"에 대한 포스팅을 진행해보려고 합니다.
저는 CSS 라이브러리의 종류 중 Styled-components와 비슷하게 가장 대중적으로 사용되는 CSS-in-JS 방식인 Emotion에 대해서 공유하고자 합니다.
Emotion은 제가 가장 좋아하는 스타일 라이브러리이기도 한데요! ㅋㅋㅋ
사실 저는 Emotion의 재정 기여자이기 하답니다 ㅎㅎ
ㅋㅋㅋㅋㅋ 최근에 좋은 기회로 emotion 오픈소스에 후원하게 되었습니다 ㅎㅎ
이정도로 (?) 진심인 사람의 Emotion 포스팅 시작합니댜 :)
01. Emotion 장점?
제가 생각하는 Emotion 장점은 아래와 같습니다:)
-
css-in-js 형식으로 스타일을 사용할 수 있어서 편리하다.
-
구현 시 스타일의 className이 바로 부여되기 때문에 복잡한 스타일 구조에서 겹칠 이유가 없어서 구현에 편리했습니다.
-
css 내부에 props 를 자유롭게 스타일 지정이 가능하게 할 수 있기 때문입니다.
-
보편화된 반응형 기술들 (vendor-prefixing, 미디어 쿼리)를 지원한ㄴ다.
-
스타일 입문을 styled component로 한 제가 emotion이 이와 비슷하기 때문에 사용방식때문에 쓰기가 편했습니다 ^^;;
-
서버 사이드 렌더링 작업이 필요로 하지 않는다!!
저는 이 6가지 이유가 emotion의 장점이라고 생각하면서 사이드 프로젝트에서 자주 써왔습니다 ><!!
02. @emotion/css, /react, /styled 차이점?
우선 @emotion/css, @emotion/react, 그리고 @emotion/styled는 Emotion 라이브러리 내에서 다양한 방식으로 스타일링을 제공하는 패키지들 인데요! 이 각각의 패키지를 상황에 맞춰 특정한 스타일링 방법과 사용 케이스에 최적화 되어있습니다;)
각각의 패키지의 차이점을 알아보도록 하겠습니다!
1) @emotion/css
이 패키지는 우리가 css로 흔히 말하는 본 css 클래스를 생성하는 기능을 제공하는 해키지입니다. React에 의존하지 않아서 다양한 상황에서도 유연하게 사용할 수 있어요!
css 함수를 통해서 스타일을 정의하고 정의한 함수가 고유한 클래스 이름을 리턴합니다. html 요소의 class 속성으로도 적용할 수 있어요!
코드로 예시를 볼까요?
import { css } from '@emotion/css';
const buttonStyle = css`
color: hotpink;
font-size: 20px;
`;
document.body.innerHTML = `<button class="${buttonStyle}">Click me</button>`;
2) @emotion/react
이 패키지는 React 컴포넌트 내에서 CSS-in-JS 스타일링을 직접 적용할 수 있도록 설계된 패키지예요!
css 속성을 사요해서 컴포넌트에 스타일링을 직접 적용합니다. 이 패키지는 스타일을 객체나 문자열로 정의할 수 있게 해주고, 조건부 스타일링과 테마, 동적 스타일링을 지원해요
코드로 예시를 보면 아래와 같습니다!
import { css } from '@emotion/react';
const style = css`
color: hotpink;
`;
const MyComponent = () => <div css={style}>Hello, Emotion!</div>;3) @emotion/styled
이 패키지는 컴포넌트 레벨에서 스타일을 정의할 수 있는 styled-component 방식을 사용할 수 있어요! 애초에 문법도 CSS랑 비슷하고, 여기서 생성된 컴포넌트는 스타일이 적용된 상태로 사용돼요:)
이 스타일을 컴포넌트와 완벽하게 통합하여 재사용이 가능한 스타일 컴포넌트를 만들 수 있어요! 스타일과 컴포넌트 로직을 명확하게 분리하는데 도움을 줄 수 있는 스타일 패키지 입니다.
코드로 예시를 보면 아래와 같습니다!
import styled from '@emotion/styled';
const PinkButton = styled.button`
color: hotpink;
font-size: 20px;
`;
const MyComponent = () => <PinkButton>Click me</PinkButton>;
03. 패키지 설치
Emotion을 사용하기 위해서 패키지를 설치하는 명령어는 아래와 같습니다!
npm install @emoiton/styled @emotion/react @emotion/css04. emotion에서 Css Props 사용법
emotion에서 지원하는 기능인 CSS Props API를 사용하면 React 컴포넌트의 스타일을 직접적으로 지정할 수 있습니다. 이 기능을 사용하기 위해서는 @emotion/react 패키지가 필요해서 먼저 설치하고 시작해볼게요!
- JSX Pragma 설정: JSX 파일 상단에 다음과 같이 pragma를 설정합니다.
/** @jsxImportSource @emotion/react */- 컴포넌트에 css props를 적용해서 스타일 적용하기
import { css } from '@emotion/react';
function MyComponent() {
return (
<div
css={css`
background-color: hotpink;
&:hover {
color: white;
}
`}
>
Hello, Emotion!
</div>
);
}- CSS Props의 장점
먼저 Inline 스타일의 한계 극복할 수 있다는 점입니다. JavaScript 객체를 이용한 인라인 스타일 방식은 :hover와 같은 CSS 의사 클래스나 @media와 같은 미디어 쿼리를 사용할 수 없지만, emotion의 CSS Props를 사용하면 이러한 CSS 기능들을 자유롭게 사용할 수 있어서 장접으로 생각해볼 수 있습니다.
오늘은 Emotion에 대해서 알아보았습니다! 우당탕탕 도서관 1주차 스터디도 정말 많은 분들의 포스팅을 보면서 질문도하고 설명도 들으면서 제가 몰랐던 다양한 css 라이브러리의 종류와 응용된 사용법까지 알 수 있어서 좋은 스터디 시간이었습니다!
