React 스타일링 - emotion

emotion공식 사이트

: emotion.sh/docs/introduction

Emotion - Introduction

저는 React 개발시 주로 emotion으로 스타일링을 합니다. 

스타일만 따로 빼서 관리하기도 편하고 SASS처럼 사용하면 됩니다. 

함수형 스타일링도 지원합니다. 

 

 

1. 설치 및 Demo 소스 사용

yarn add @emotion/react

공식 사이트에 있는 예제를 가져와 보자.

 

/** @jsx jsx */
import { css, jsx } from '@emotion/react'
const color = 'white'

function App() {
  return (
    <div className="App">
       <div
        css={css`
          padding: 32px;
          background-color: hotpink;
          font-size: 24px;
          border-radius: 4px;
          &:hover {
            color: ${color};
          }
        `}
      >
        Hover to change color.
      </div>
    </div>
  );
}

export default App;

 

리액트 최선버전으로 설치했거나 npx를 사용하여 프로젝트를 생성한 경우, 다음과 같은 에러가 날 껍니다.

 

errorSyntaxError: pragma and pragmaFrag cannot be set when runtime is automatic.

 

기존에 잘 사용하다가 갑자기 이런 에러가 나서, 저도 많이 당황했는데요.

이유는 React17로 업데이트 되면서 바뀐 runtime 엔진이 emotion10 과 충돌 난다고 합니다. 

 

해결방법은(마음에 들진 않지만... 조만간 React나 emotion 둘 중 하나가 업데이트 하길 바라며... 😥)

기존 runtime을 classic 모드로 바꿔주면 됩니다.

 

/** @jsx jsx */ 대신 /** @jsxImportSource @emotion/react */ 사용하면 됩니다.

/** @jsxImportSource @emotion/react */ 
import { css, jsx } from '@emotion/react'
const color = 'white'

function App() {
  return (
    <div className="App">
       <div
        css={css`
          padding: 32px;
          background-color: hotpink;
          font-size: 24px;
          border-radius: 4px;
          &:hover {
            color: ${color};
          }
        `}
      >
        Hover to change color.
      </div>
    </div>
  );
}

export default App;

잘 나옵니다. 😏

 

 

---

2. CSS 공통 값 정의

자주 사용되는 기본 폰트 크기, 컬러 등을 따로 관리하면, 유지보수하기 좋고, 코드도 훨씬 깔끔해 집니다. 

 

공통 색을 따로 빼서 colors.js 라는 파일에 객체로 넣어줍니다.

사용할 페이지에서 불러와 ${color} 형태로 넣어주면 됩니다. 

// colors.js
export const colors = {
    default: 'darkseagreen',
    warning: 'darkorange',
    danger: 'lightcoral',
}

/** @jsxImportSource @emotion/react */
import { css, jsx } from '@emotion/react'
import { colors } from './colors'

function App() {
  return (
    <div className="App">
       <button css={buttonStyle}>DEFAULT</button>
    </div>
  );
}

const buttonStyle = css`
  background: ${colors.default};  // darkseagreen 컬러를 불러옴
  color: #fff;
  border: 0 none;
  padding: 8px; 
  margin: 5px;
  border-radius: 3px;
`

export default App;

 

3. 함수형으로 사용하기

props로 값을 전달하여 조건부를 삽입할 수도 있습니다.

props값으로 전달 받으려면 함수형태로 작성해줘야 합니다.

{...}
function App() {
  return (
    <div className="App">
       <button css={buttonStyle('default')}>DEFAULT</button>
       <button css={buttonStyle('warning')}>DEFAULT</button>
       <button css={buttonStyle('danger')}>DEFAULT</button>
    </div>
  );
}
{...}
const buttonStyle = (type) => {
  return css`
    background: ${
      type === 'default' ? colors.default :
      type === 'warning' ? colors.warning :
      type === 'danger' ? colors.danger : 'lightgray'
    };
    color: #fff;
    border: 0 none;
    padding: 8px; 
    margin: 5px;
    border-radius: 3px;
  `
}

그런데 이렇게 하자니 색이 추가될때마다 또 추가해야되지요? 

객체형태로 작성되어 있다면, 굳이 삼항연산자를 쓰지 않고 키 값만 불러오면 되겠네요.

const buttonStyle = (type) => {
  return css`
    background: ${colors[type]};
    color: #fff;
    border: 0 none;
    padding: 8px; 
    margin: 5px;
    border-radius: 3px;
  `
}

 

훨씬 보기 좋습니다. 😏

 

모두 적용된 화면