Install

이번 포스팅에서는 Emotion으로 React에서 스타일을 적용해보죠
기본적인 환경 설정을 위해 프로젝트 폴더를 하나 만들고 터미널을 열어 아래의 명령어를 입력해 줍니다.

npm install react @emotion/css @emotion/react @emotion/styled
or
yarn add react @emotion/css @emotion/react @emotion/styled

@emotion/css 설정은 공식 문서을 참고해 주세요!

@emotion/css

기본적인 사용 예시를 한번 보죠 특징으로는 className이 중복없이 자동으로 부여 됩니다
또한 객체 안에서 템플릿 리터럴을 이용할 수 있죠

import { css } from "@emotion/css"
import { COLOR } from "../constants/color"

const Layout = ({ children }) => {
    const point = css`
        color: ${COLOR.POINT};
    `;
    
    const base = css`
        color: ${COLOR.WHITE};
    `;
    
    return (
        <div className={css`
          display: flex;
          background: ${COLOR.GREY}
        `}>
            <div className="container">
                <div css={ { base, point } }>포인트 컬러가 기본 컬러를 덮어 쓰게 됩니다.</div>
                <div css={ { base } }>{children}</div>
            </div>
        </div>
    );
};

'base'와 같이 컴포지션 타입으로 만들어 두면 위와 같이 재사용이 가능합니다!

@emotion/react

React에서 사용하기 편하도록 만들어진 라이브러리입니다
css prop을 지원하는 것이 특징이죠

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

const Layout = ({ children }) => {
    return (
        <div css={wrap} className="wrap">
            <div className="container">
                <div className="inner">{children}</div>
            </div>
        </div>
    );
};

// Default
const wrap = css`
  display: flex;

  .container {
    background: #5e5e5e;
  }
`;

// Functional
const wrap = () => {
  return css`
  display: flex;

  .container {
    background: #5e5e5e;
  }
`};

인라인으로 선언하는 것을 지양한다면 위와 같이 문자열이나 함수형으로도 선언할 수 있습니다!

@emotion/styled

스타일이 적용된 컴포넌트를 가져다가 사용하는 방식입니다 Styled-components이나 Ant Design과 매우 유사한 것을 알 수 있죠

import styled from "@emotion/styled";

const Layout = ({ children }) => {
    const Inner = styled.div({
        background: '#5e5e5e';
    });

    const Container = styled.div({
        [Inner]: {
            background: '#f4f4f4';
        }
    })
    
    return (
        <div className="wrap">
            <Container>
                <Inner>{children}</Inner>
            </Container>
        </div>
    );
};

부모 컴포넌트에서 자식 컴포넌트를 선택하여 스타일을 재정의할 수 있습니다!

React Version.17 Issue

React가 버전이 17로 변경되면서 runtime 엔진이 emotion과 충돌되는 이슈가 있다고 합니다
아래와 같이 구문을 추가해주면 문제없이 해결됩니다!! (CodeSandBox도 동일하게 추가해야 동작합니다)

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

Conclusion

오늘 포스팅에서는 Emotion을 적용해서 React의 JSX에서 태그에 직접 인라인으로 스타일을 적용하는 방식과
함수형으로 만들어서 스타일을 적용하는 방법을 알아보았습니다
기존의 Styled-components와 유사하면서도 Sass방식과는 또 다른 방법이기에 이번 프로젝트에서
사용해보면서 재밌게 작업했던 경험으로 남을 것 같습니다