[React] 컴포넌트 내부에서 CSS를 쉽게 스타일링 하기: Emotion

Css-in-JS

기존에는 CSS파일을 따로 작성하여 불러오는 방식을 사용했습니다. HTML+CSS+HTML의 3개의 축으로 웹페이지를 작성하는 것이 기본이었습니다. 하지만 최근에는 React등이 대세가 되고 컴포넌트라는 개념이 대두되면서, 컴포넌트 안에서 CSS까지 작성하는 것이 트렌드가 되었습니다. 이러한 스타일링 방식을 CSS-in-JS라고 부르며 대표적으로는 'Styled-components', 'Emotion' 등이 있습니다.

 

 

Emotion이란?

여기서 소개할 Emotion은 다음과 같은 특징이 있습니다.

• 컴포넌트가 렌더링 될 때에만 적용한 스타일의 태그를 생성합니다.
• state에 따라 스타일이 변경되게 적용할 수 있습니다.
• 스타일의 요소들은 자동으로 class 이름이 부여되어 중복되지 않습니다.
• 서버 사이드 렌더링을 지원하여 SEO 최적화와 초기 로딩 속도를 개선할 수 있습니다.

 

따라서 Emotion은 React 및 Next.js에서 사용하면 효율이 좋습니다.

---

React에서 Emotion 설치하기

React 프로젝트에서의 Emotion 설치는 다음과 같이 진행됩니다.

 

1. React 프로젝트를 생성하기

터미널에서 다음과 같은 명령어로 새로운 React 프로젝트를 생성합니다.

npx create-react-app emotion-project

만약 TypeScript를 사용한다면 다음과 같은 명령어를 입력합니다.

npx create-react-app emotion-project --template typescript

 

2. Emotion 설치하기

프로젝트의 내부로 이동한 뒤, 터미널에서 다음의 명령어를 입력합니다.

npm install @emotion/react

 

package.json에 다음과 같이 의존성이 추가된 모습을 확인할 수 있습니다.

{
  "name": "emotion-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
//생략

 

3. Emotion 사용하기

React에서 Emotion을 사용하기 위해서는 최상단에 다음처럼 코드를 작성해야 합니다.

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

원래는 import { css } from "@emotion/react";만 작성해도 제대로 작동해야 하나 이 글에서는 create-react-app으로 프로젝트를 작성해서 /** @jsxImportSource @emotion/react */ 즉 JSX pragma라는 전처리 코드를 작성해야 CSS-in-JS가 제대로 작동합니다.

전역에서 JSX pragma를 사용하지 않고 깔끔하게 코드를 작성하는 방법은 아래의 링크를 참고해주세요.

 

CRA + Emotion 사용시 jsx pragma 선언 없이 css 사용 방법

 

아래의 예시는 style에 모든 속성을 다 넣고 key-value 형식으로 만든 다음 style에서 필요한 속성만 꺼내서 쓰는 방식으로 코드를 작성하였습니다.

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

const style = {
  title: css`
    font-size: 100;
    color: white;
  `,
  box: css`
    background-color: rgb(30, 24, 100);
    padding: 10px;
  `,
  button: css`
    padding: 10px;
  `,
  list: css`
    font-size: 50;
    color: white;
    font-weight: bold;
  `,
  container: css`
    display: flex;
  `,
};

function App() {
  return (
    <div css={style.box}>
      <h1 css={style.title}>이모션 프로젝트</h1>
      <div css={style.container}>
        <ul css={style.list}>
          <li>asdf</li>
          <li>csd</li>
        </ul>
        <button css={style.button}>asdf</button>
      </div>
    </div>
  );
}

export default App;

 

실행한 결과는 다음과 같습니다.