결론은 공식 문서를 잘 읽읍시다.
Why Emotion?👩🎤
스타일링은 주로 styled-components를 사용해왔다. 개인적으로 가장 좋았던 점은 JSX 코드가 깔끔해진다는 것이었다. styled-components를 사용하면 스타일 관련 props를 작성하지 않아도 되고 return 하는 JSX 코드의 가독성이 높아진다. 그 외에도 다양한 장점이 있지만 불편함 역시 있었다.
- 기능이 추가될수록 가독성이 떨어지고 헷갈린다.
렌더링 로직과 스타일을 한 파일에 작성하다 보니 가독성이 떨어진다. (아래 그림의 오른쪽처럼 구현)
-
네이밍의 고통
기업에서는 컨벤션이 있을테지만 공부하는 사람 입장에서는 정해진 것이 없으니 어렵게 느껴진다. Wrapper, Container, Card, ... 어떤 이름을 사용할까? 이 컴포넌트는 뭐라고 정의해야 기존 요소와 기능과 스타일이 명확히 보일까? 라는 고민 -
사용자 정의 컴포넌트를 남용하는 것이 아닐까?
2번 내용이랑 이어지는데 네이밍을 제대로 하지 못하면 원래 요소가 div 였는지 p 였는지 header 였는지 footer 였는지 바로 알 수가 없다. 스타일만을 위해 새로운 컴포넌트로 정의하는 것이 좋은 방식인지? 에 대한 고민
CSS module로 로직을 분리하는 방식도 사용해봤다. 스코프가 제한되어 있다는 장점이 있지만 className을 지정해줘야 되기 때문에 JSX 코드 가독성이 떨어진다. 그래도 CSS 파일이 제공될 경우 편하게 사용할 수 있다.
트러블슈팅 내용만 간단하게 적으려고 했는데 서론이 엄청 길어졌다. 결론은 새로운 스타일링 방법을 찾아보기 위해 JD에 많이 보이는 Emotion을 사용해 봤다는 것이다. 잠깐 사용해보니 composition 기능이 매우 맘에 들어서 앞으로 자주 사용할 것 같다.
문제 상황
Emotion의 기본 핵심 기능이라고 할 수 있는 The css Prop 이 적용이 되지 않는 문제가 있었다.
문제 파악 및 해결 과정
일단은 Emotion의 Styled Components 로 대체해서 썼다. 변명을 하자면 새벽 3시에 디버깅 할 힘이 없었다. '그래 이것도 Emotion 에서 import 해오니까 이모션이야' 하며 합리화 했다.
아침에 일어나서 다시 공식 문서를 읽어보았고 맑은 정신이라 그런지 바로 문제를 파악할 수 있었다. Get Started 를 따라만 가면 해결 가능한 문제였다.
(1) Styled Components 방식
css prop 적용하기 전 styled를 사용한 방식
Backdrop.js
import React from "react";
import styled from "@emotion/styled";
const Wrapper = styled.div`
width: 400px;
max-width: 100%;
height: 100vh;
margin: 0 auto;
background: #ECECEC;
`;
const Backdrop = ({ children }) => {
return (
<Wrapper>{children}<Wrapper>
);
};
export default Backdrop;(2) css Prop 방식
내가 원했던 css prop 방식
Backdrop.js
/** @jsxImportSource @emotion/react */
import React from "react";
import { jsx } from "@emotion/react";
import { screen, center } from"./styles";
const Backdrop = ({ children }) => {
return (
<div css={[screen, center]}>{children}</div>
);
};
export default Backdrop;styles.js
import { css } from "@emotion/react";
export const screen = css`
width: 400px;
max-width: 100%;
height: 100vh;
background: #ECECEC;
`;
export const center = css`
margin: 0 auto;
`;해결 방법
css 를 지정할 컴포넌트가 있는 파일 상단에 다음 코드를 추가하면 된다.
/** @jsxImportSource @emotion/react */
import { jsx } from "@emotion/react";최신 React가 아닌 경우 아래 코드를 사용한다.
/** @jsx jsx */
import { jsx } from '@emotion/react'참고
본인은 Create React App 으로 개발환경을 구축했기 때문에 JSX Fragma 방식을 사용하였다. custom Babel 설정이 불가능한 경우 (create-react-app 나 codesandbox 등) JSX Fragma 방식을 사용해야 하고, custom Babel configurations 설정이 가능한 경우는 Babel Preset 방식을 사용할 수 있다.
References
