[클린코드 리액트] Css in JS 인라인 스타일 지양하기

CSS-in-JS를 사용할 때, 스타일 코드를 인라인으로 지정하는 것은 일반적으로 지양되는 패턴 중 하나입니다. 대신에, 컴포넌트 외부에 스타일 코드를 선언하는 것이 권장됩니다. 여기서는 이러한 방법이 왜 더 좋은지, 그리고 어떤 장점을 가지는지 살펴보겠습니다.

 

외부 스타일 코드 선언하기

Emotion을 사용해 스타일을 할 때 emotion/css emotion/react 라이브러리를 활용해 스타일링을 할 수 있습니다. 이때 css API는 Tagged Function을 사용하는 것 보다는 JS 객체 형식의 스타일 코드를 사용하는 것이 권장됩니다. 이때 스타일 코드는 JSX에 인라인 스타일로 작성하는 것 보다는 컴포넌트 외부의 변수로 빼내어 사용하는 것이 성능에 좋습니다.

 

외부로 분리할 경우 장점

1. 랜더링 시 직렬화 회피: 스타일 코드를 외부로 분리함으로써, 스타일이 랜더링 될 때마다 직렬화되는 문제를 피할 수 있습니다. 이는 애플리케이션의 성능 향상에 도움이 됩니다.

2. 동적인 스타일 관리 용이: 외부 스타일로 분리하면 동적인 스타일을 실수로 건드리는 확률이 줄어듭니다. 이는 유지보수를 더욱 쉽게 만들어줍니다.

3. 로직과 스타일의 분리: 스타일 관련 코드를 분리함으로써, 로직에 집중할 수 있습니다. 이는 코드의 가독성을 향상시키고, JSX를 보다 간결하게 만들어줍니다.

CSS-in-JS를 사용할 때는 가능한 인라인 스타일을 지양하고, 외부에 스타일 코드를 선언하여 위의 장점을 누릴 수 있도록 하는 것이 좋습니다. 이는 애플리케이션의 유지보수성과 성능을 향상시킬 수 있는 중요한 원칙입니다.

샘플 코드

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

const style = {
  title: css({
    color: "red",
    fontSize: "24px",
  }),
  desc: css({
    color: "blue",
    fontSize: "12px",
  }),
};

// Good Case
const Sample = () => {
  return (
    <div>
      <h3 css={style.title}>title</h3>
      <p css={style.desc}>desc</p>
    </div>
  );
};

// Bad Case
const SampleTwo = () => {
  return (
    <div>
      <h3
        css={css`
          color: red;
          font-size: 24px;
        `}
      >
        title
      </h3>
      <p
        css={css`
          color: blue;
          font-size: 12px;
        `}
      >
        desc
      </p>
    </div>
  );
};