🎱 CSS-in-JS

이름에서 알 수 있듯, javascript에서 CSS를 작성 할 수 있는 스타일.
스타일을 전달하는 컴포넌트 만들기
컴포넌트에 스타일 적용하기
초기 세팅을 해주면 className이 초기 설정값에 맞게 자동 부여가 됩니다.

🎱 용량&성능

https://bundlehobia.com/를 참고해 최신 라이브러리 사이즈를 확인해봅시다.
라이브러리 용량은 비슷해보이지만 @emotion/react와 styled-components를 놓고 비교해 봤을 땐 1.5배 정도 차이가 납니다.

🎱 초기설정

만약 styled-component로 사용하고 싶다면 @emotion/styled를 설치하시면 됩니다.

$ npm install @emotion/react

$ npm install @emotion/styled

아래와 같이 className을 커스터마이징 하려면 @emotion/babel-plugin 을 설치하면 됩니다.

$ npm install @emotion/babel-plugin

📂 /.babelrc

labelFormat 에서 설정값을 지정해주면 세팅값에 따라서 className이 지정됩니다.

{
  "presets": ["next/babel", "@emotion/babel-preset-css-prop"],
  "plugins": [
    [
      "@emotion",
      {
        "autoLabel": "dev-only", //기본값
        "labelFormat": "[dirname]-[filename]-[local]"
      }
    ]
  ]
}

📂 /tsconfig.json

css props 설정

{
  "compilerOptions": {
   ...
    "types": ["@emotion/react/types/css-prop"]
  },
	...
}

🎱 Media Queris 작성법

import { jsx } from '@emotion/react'

const breakPoints = [375, 768, 1024, 1444]

const mq = breakPoints.map(
	bp -> `@media (min-width: ${bp}px)`
)

render (
	<div
		css={{
			color: 'pink'
			[mp[0]]: {
				color: 'blue'
			},
			[mq[1]]: {
				color: 'deepblue'
			}
		}}
	>
		How to use	Media Querues !
	</div>
	<p
		css={css`
		${mq[0]} {
			font-size: 20px;
		}
		${mq[1]} {
			font-size: 26px;
		}
	>
		Emotion CSS !
	</p>
)

🎱 조건부 스타일링 적용하기

Emotion CSS 기본 사용법

Emotion CSS는 기본적으로 styled-component와 작성 법이 유사합니다.

변수 하나를 선언하고 그 안에 템플릿 리터럴을 이용해 CSS 내용을 변수에 넣어둡니다.

이제 해당 스타일을 적용할 부분에 css={변수명}을 작성해주면 됩니다.

<div css={container}>
	<h1 className="title"> Emotion CSS </h1>
	<p className="desc"> 조건부 스타일링 적용하기 </p>
</div>

const contiainer = css`
	.title {
	font-size: 30px;
	color: pink;
	.desc {
		fot-size: 18px;
		color: gray
	}
}
`

조건부 스타일링

조건에 따라 css를 다르게 적용 시키고 싶을땐

css를 담은 변수에 props로 값을 전달해주면 됩니다

const normalContainer = css`` // 기존 방식
const ConditionalContainer = (props) => css`` //props 전달하는 방식

괄호() 안에 요소를 담아 전달합니다.

<div css={CoditionalContainer({ tp })></div>

const ConditionalContainer = (props) => css`
  padding: 2rem;
  color: ${props.tp === 3
    ? "red"
    : props.nowTime === 2
    ? "blue"
    : props.nowTime === 1
    ? "green"
    : "black"};
`;

문제점

Emotion CSS는 CSS-in-작성 방식으로 인라인스타일로 직정 스타일을 적용 할 수 있습니다.

<span
  css={css`
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    word-break: break-all;
    white-space: no-wrap;
  `}
>
  {text}
</span>

위와 같이 작성한다면 직관적로 css 적용을 확인 할 수 있다는 장점이 있지만

많은 줄의 코드가 작성 될 경우 가독성을 해친다는 문제가 있습니다.

🎱 비슷한 듯 다른 Emotion 👩‍🎤 VS styled-copoment 💅

emotion은 styled-comopnents 작성법도 지원하는 것을 보고 styled-compents와 emotion 간에 어떤 차이점이 있을까 생각이 들어 정리해보았습니다.

1. TypeScript

• styled-components에서는 타입스크립트를 지원하지 않아 @types/styled-components를 추가로 설치 해야하지만
  emotion의 경우 자체에서 타입스크립트를 지원해 별도로 설치 할 필요가 없습니다.

1. Server Side Rendering
   • @emotion의 경우 서버측 렌더링은 emotion 10이상에서 기본적으로 동작합니다.
   • 반면 styled-compoents같은 경우 ServerStyleSheet를 설정해야 합니다.
     • Next.js에서 제공하는 예시 참고링크 styled-compoents 공식문서
       
2. css props

• props 기능을 제공함으로써 조건부 스타일링이 가능합니다.

---

참고사이트

css-in-js/README.md at main · andreipfeiffer/css-in-js

Introduction