React - CSS 적용

React에서 CSS를 적용하는 방법은 크게 세 가지가 있다.

1. 스타일시트를 이용한 적용

.box {
  width: 100px;
  height: 100px;
  background-color: aqua;
}

import "./Box.css";

const Box = () => {
  return <div className="box" />;
};

export default Box;

2. 인라인 스타일 적용

import "./Box.css";

const Box = ({ bgColor }) => {
  return <div className="box" style={{ backgroundColor: bgColor }} />;
};

export default Box;

3. CSS in JS

다양한 라이브러리들이 있지만 여기서는 emotion을 다룬다.
별도로 스타일시트 파일을 만들지 않아도 되고
중복되지 않는 클래스 이름을 자동으로 붙여준다.

emotion 설치

npm i @emotion/react

바벨 플러그인 설치

npm i -D @emotion/babel-plugin

styled 설치

npm i @emotion/styled

파일에 프래그마 적용
프래그마: 컴파일러에게 이 파일을 어떻게 처리할 지를 알리는 것

/** @jsxImportSource @emotion/react */
import Box from "./components/Box";
import { jsx, css } from "@emotion/react";

const style = css`
  color: hotpink;
`;

const SomeComponent = ({ children }) => (
  <div css={style}>
    Some hotpink text.
    {children}
  </div>
);

function App() {
  return (
    <div>
      <SomeComponent />
      <Box bgColor="red" />
    </div>
  );
}

export default App;

하지만 모든 파일에 프래그마를 붙이는 것은 번거로움이 발생하므로 자동으로 처리되도록 설정을 할 수 있다.

CRA는 .babelrc파일이 적용되지 않아 다른 방법으로 적용시켜야 한다.

craco 라이브러리 설치 (create-react-app-config-override)

npm i -D @craco/craco

craco.config.js 생성 후 작성

module.exports = {
  babel: {
    presets: ["@emotion/babel-preset-css-prop"],
  },
};

preset 설치

npm i -D @emotion/babel-preset-css-prop

package.json의 scripts에 react-scripts를 craco로 변경

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },

Styled-component로 적용하기

이런 식으로 CSS함수를 사용하여 만들 수도 있다.