Emotion js

CSS-in-JS 라이브러리로, 자바스크립트 파일 내에서 스타일을 지정할 수 있는 라이브러리입니다.

인기가 많습니다.

이유

장점

• 플릿 리터럴 또는 객체를 통해 손쉽게 스타일을 적용한 컴포넌트를 만들 수 있었고, 손쉽게 적용할 수 있었기 때문입니다.

• ass 문법을 지원했기 때문에 더 간결한 코드 작성이 가능하고, 서버사이드렌더링을 지원해주기 때문에 이를 위해 추가적인 조치를 취할 필요가 없었습니다.

단점

• 번들 용량이 위의 사진과 같이 4개의 라이브러리 중 제일 컸음

해결

EmotionJS 라이브러리가 등장했는데 해당 라이브러리는 styled-components의 기능을 거의 동일하게 사용할 수 있었을 뿐더러, 추가적으로 라이브러리를 설치해 손쉽게 기능 확장이 가능합니다.

사용법

플러그인 설치

yarn add gatsby-plugin-emotion @emotion/react @emotion/styled

글로벌 스타일 지정

1. Tagged Template Literal 방식으로 스타일을 정의

const globalStyle = css`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-size: 20px;
  }
`

2. emotion 에서 제공하는 글로벌이라는 컴포넌트로 넘겨주기

<Global styles={globalStyle} />

css 스타일 적용방법

<div css={TextStyle}>{title}</div>

스타일드 컴포넌트로의 적용 방법

컴포넌트 작성

const Text1 = styled.div`
  font-size: 20px;
  font-weight: 700;
`

const InfoPage: FunctionComponent<InfoPageProps> = function ({
  data: {
    site: {
      siteMetadata: { title, description, author },
    },
  },
}) {
  return (
    <div>
      <Global styles={globalStyle} />
      <div css={TextStyle}>{title}</div>
      // 컴포넌트 적용
      <Text1>{description}</Text1>
      {author}
    </div>
  )
}