Emotion 으로 React 컴포넌트 스타일링

패키지 설치 

 

npm i @emotion/react

 

Emotion은 반드시 React 프로젝트에서만 사용해야 하는 것은 아니다.

일반 js프로젝트에서는 @emotion/css패키지를 설치하면 된다.

 

 

기본 문법

 

Styled Components의 꽃이 styled()함수였다면, Emotion의 꽃은 css()함수이다.

오랜 기간 동안 두 라이브러리가 서로 경쟁하면서 현재는 Styled Components도 css()함수를 사용할 수 있고, 

Emotion도 뒤질세라 styled()함수를 제공하고 있다.

 

함수는 css 선언 내용을 인자로 받는데 객체형으로 넘겨도 되고, 문자형으로 넘겨도 된다.

그리고 css() 함수의 반환 결과를 해당 스타일을 적용하고 싶은 HTML 요소나 React 컴포넌트의 css라는 prop에 넘겨주면 된다.

 

 

- 객체형 스타일

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

function MyComponent() {
  return (
    <div
      css={css({
        backgroundColor: "yellow",
      })}
    >
      노란색 영역
    </div>
  );
}

 

- 문자형 스타일

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

function MyComponent() {
  return (
    <div
      css={css`
        background-color: yellow;
      `}
    >
      노란색 영역
    </div>
  );
}

 

Emotion 문서에서는 가급적 스타일을 객체로 선언해서 css() 함수에 넘기라고 권장하고 있는데요. 이 방법을 사용하면 css() 함수를 호출을 생략하고 css prop에 바로 객체를 넘길 수 있으며, 특히 타입스크립트(TypeScript)를 사용하면 타입 체킹(type checking)을 통해 버그도 줄일 수 있기 떄문이다.

 

 

고정 스타일링

 

<button> 요소의 css prop을 통해서 다양한 css 속성 정의를 객체로 넘겨보기

 

/** @jsxImportSource @emotion/react */

function Button({ children }) {
  return (
    <button
      css={{
        borderRadius: "6px",
        border: "1px solid rgba(27, 31, 36, 0.15)",
        backgroundColor: "rgb(246, 248, 250)",
        color: "rgb(36, 41, 47)",
        fontFamily: "-apple-system, BlinkMacSystemFont, sans-serif",
        fontWeight: "600",
        lineHeight: "20px",
        fontSize: "14px",
        padding: "5px 16px",
        textAlign: "center",
        cursor: "pointer",
        appearance: "none",
        userSelect: "none",
      }}
    >
      {children}
    </button>
  );
}

export default Button;

 

이 코드를 다른 React컴포넌트에서 사용하려면?

 

import { Button } from "./Button";

function App() {
  return <Button>Button</Button>;
}

 

그렇다면 , 브라우저에서 소스보기를 해보면 button요소에 Emotion 이 자동으로 생성해준 클래스 이름이 붙어있다는 것을 확인 할 수 있다.

 

 

가변 스타일링(props 전송)

 

Emotion을 사용하면 React 컴포넌트에 넘어온 props에 따라 다른 스타일을 쉽게 적용할 수 있다. 바꾸고 싶은 CSS 속성값에 상수 대신에 prop에 따라 변하는 변수를 할당해주기만 하면 된다.

 

예를 들어, <Button/> 컴포넌트에 variant라는 prop을 추가한 후에, 이 prop에 어떤 값이 넘어오느냐에 따라 글자색이 바뀌도록 코드를 짜보았다.

 

 

/** @jsxImportSource @emotion/react */

const colors = {
  default: "rgb(36, 41, 47)",
  danger: "rgb(207, 34, 46)",
  outline: "rgb(9, 105, 218)",
};

function Button({ children, variant = "default" }) {
  return (
    <button
      css={{
        borderRadius: "6px",
        border: "1px solid rgba(27, 31, 36, 0.15)",
        backgroundColor: "rgb(246, 248, 250)",
        color: colors[variant],
        fontFamily: "-apple-system, BlinkMacSystemFont, sans-serif",
        fontWeight: "600",
        lineHeight: "20px",
        fontSize: "14px",
        padding: "5px 16px",
        textAlign: "center",
        cursor: "pointer",
        appearance: "none",
        userSelect: "none",
      }}
    >
      {children}
    </button>
  );
}

export default Button;

import Button from "./Button";

function App() {
  return (
    <>
      <Button variant="default">Default</Button>
      <Button variant="danger">Danger</Button>
      <Button variant="outline">Outline</Button>
    </>
  );
}

 

이와 같은 방식으로 button의 color를 props전달로 색만 변경가능하게 코드를 짤 수 있다.

 

 

가변 스타일링 2 (prop를 여러개 전달)

 

size라는 prop에 넘어온 값에따라서 버튼의 크기가 바뀌도록 해보자.

 

fontSize속성과 padding속성을 다르게 해보겠다.

 

/** @jsxImportSource @emotion/react */

const colors = {
  default: "rgb(36, 41, 47)",
  danger: "rgb(207, 34, 46)",
  outline: "rgb(9, 105, 218)",
};

const sizeStyles = {
  sm: {
    fontSize: "12px",
    padding: "3px 12px",
  },
  md: {
    fontSize: "14px",
    padding: "5px 16px",
  },
  lg: {
    fontSize: "16px",
    padding: "9px 20px",
  },
};

function Button({ children, size = "md", variant = "default" }) {
  return (
    <button
      css={{
        borderRadius: "6px",
        border: "1px solid rgba(27, 31, 36, 0.15)",
        backgroundColor: "rgb(246, 248, 250)",
        color: colors[variant],
        fontFamily: "-apple-system, BlinkMacSystemFont, sans-serif",
        fontWeight: "600",
        lineHeight: "20px",
        ...sizeStyles[size],
        textAlign: "center",
        cursor: "pointer",
        appearance: "none",
        userSelect: "none",
      }}
    >
      {children}
    </button>
  );
}

export default Button;

import Button from "./Button";

function App() {
  return (
    <>
      <Button size="sm" variant="default">
        Default
      </Button>
      <Button size="md" variant="default">
        Default
      </Button>
      <Button size="lg" variant="default">
        Default
      </Button>
      <hr />
      <Button size="sm" variant="danger">
        Danger
      </Button>
      <Button size="md" variant="danger">
        Danger
      </Button>
      <Button size="lg" variant="danger">
        Danger
      </Button>
      <hr />
      <Button size="sm" variant="outline">
        Outline
      </Button>
      <Button size="md" variant="outline">
        Outline
      </Button>
      <Button size="lg" variant="outline">
        Outline
      </Button>
    </>
  );
}

 

3가지 크기의 3가지 색상, 총 9가지 종류의 버튼을 만들어 낼 수 있다.