지금까지는 Css혹은 SCSS를 통해 스타일을 적용해왔는데, Css-In-Js로 작성해보는 것도 좋을 것 같아 적용해보기로 했다.
그 전에 Css-In-Js는 Css-In-Css에 비해 어떤 차이가 있어 리액트에서 종종 쓰이는지 확인해 보려한다.
2014년 페이스북 개발자인 Vjeux가 처음 소개한 기술로, CSS를 JS안에서 작성하는 방식이다.
속도면에서는 Css-In-Css보다 좀 더 느릴 수 있지만,
인터렉티브한 디자인이 많지 않은 경우 보다 뛰어난 개발 경험을 제공한다.
그는 아래와 같이 Css-In-Js가 CSS에 비해 장점을 가지고 있다고 설명했다.
이러한 발표 이후 다양한 라이브러리가 나왔으나 대표적으로 Styled Components라는 라이브러리가 있다.
이 라이브러리는 아래와 같은 장점을 가지며 활발히 사용되어오고 있다.
Emotion.js는 Styled Components라이브러리와 비슷한 라이브러리로 퍼포먼스, 용량에도 큰 차이가 없다.
하지만 CSS prop이라는 기능을 유용하게 사용할 수 있고, 좀 더 유연하며,
SSR환경에서 사용하기에 설정이 훨씬 간편하다는 장점이 있어 보다 많이 사용되고 있다.
(* 최근에는 만족도가 점점 떨어지고 있다 한다.)
Yarn Berry를 활용하고 typescript로 작성한 React에 Emotion.js를 적용하는 방법은 간단하면서도 귀찮다.
먼저 아래의 명령어를 통해 emotion.js를 설치해준다.
yarn add @emotion/react @emotion/styled
이후 test.tsx
파일과 같이 컴포넌트에서 아래처럼 스타일을 적용한다면?
import { css } from '@emotion/react';
const TestStyle = css`
font-size: 50px;
`;
const TestComponent = ():JSX.Element => {
return(
<p css={TestStyle}>테스트입니다.<p/>
);
}
네, 오류가 발생합니다.
오류가 발생하는 이유는 두 가지가 있을텐데, 먼저 p와 같은 html 태그에는 css라는 속성이 존재하지 않기 때문이고,
다음으로는 jsx pragma를 작성하지 않아서 발생하는 오류이다.
pragma는 컴파일러에게 입력을 처리하는 방법을 알려주는 지시문이다.
자 두 설정을 해주려면 tsconfig파일을 설정하고,
emotion.js를 사용하는 모든 코드 상단에 /** @jsxImportSource @emotion/react */
를 작성하면 되겠지만
보다 편한 개발을 위해 babel을 통해 pragma없이 진행해보자.
craco 혹은 react-app-rewired를 통해 CRA를 eject하지 않고 babel 설정을 할 수 있기에 craco를 통해 진행해봤다.
yarn add @babel/preset-react @babel/preset-typescript @craco/craco @emotion/babel-plugin @emotion/babel-preset-css-prop @emotion/core @emotion/css
"jsx": "react-jsx",
"jsxImportSource": "@emotion/react",
"types": ["@emotion/react/types/css-prop"]
"start": "craco start",
"build": "craco build",
"test": "craco test",
export default {
babel: {
presets: [
[
"@babel/preset-react",
{ runtime: "automatic", importSource: "@emotion/react" },
],
],
plugins: ["@emotion/babel-plugin"],
},
};
이제 문제없이 emotion.js를 통해 코드를 작성할 수 있다.
다만 eslint를 사용한다면 아래의 설정이 추가적으로 필요하다.
yarn add -D eslint-config-react-app @types/eslint @emotion/eslint-plugin
"plugins": [
"@emotion"
],
"rules": {
"react/react-in-jsx-scope": "off",
"react/no-unknown-property": ["error", { "ignore": ["css"] }]
}
이렇게 조금 귀찮지만 간단하게 설정을 마치고 emotion.js를 사용할 수 있게 되었다.
프로젝트 하나를 위해 설정을 해줘야하는게 많다보니 이런 시간이 제일 오래 걸리는 것 같다.
코드 작성도 조금 진행했지만 공유하면 좋을 내용이 생기면 빨리 다듬어서 더 작성해보려 한다.