CSS-in-JS

최종 수정 : 2024-05-30

CSS-in-JS

자바스크립트 코드로 CSS를 작성하는 방식이다. Styled Components가 이에 해당한다.

장점

컴포넌트 단위로 나누어서 스타일링을 할 수 있어서 CSS 클래스 이름이 충돌하지 않는다.

클래스네임을 짓지 않아도 된다.

자바스크립트와 JSX로 된 컴포넌트 코드와 스타일링 코드가 한 파일에 있어서 관리하기 좋다.

 

단점 및 한계

자바스크립트를 통해 CSS를 만들기 때문에 CSS나 Sass에 비해서 추가적인 연산이 발생하며, 렌더링 속도도 훨씬 느려지는 부작용이 있다.

---

import styled from 'styled-components';

const Button = styled.button`
  background-color: #ededed;
  border: none;
  border-radius: 8px;
`;

function App() {
  return (
    <div>
      <h1>안녕 Styled Components!</h1>
      <Button>확인</Button>
    </div>
  );
}

export default App;

Styled Components는 컴포넌트를 만들면서 바로 해당 컴포넌트의 스타일을 작성한다. 마치 JSX로 컴포넌트를 만드는 것처럼 리액트스럽게 CSS를 쓰는 방식이다. 편리함 덕분에 개발 속도도 빨라질 것이다.

 

또한, 스타일 재사용이 필요한 상황에서는 클래스가 아니라 JavaScript 변수를 만든다.

import { css } from 'styled-components';

const shadow20 = css`
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
`;

const shadow40 = css`
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
`;
-------------------------------------
import { shadow20 } from '../shadows';

const Card = styled.div`
  ${shadow20}
  ...(다른 CSS 코드)
`;

export default Card;

---

네스팅(Nesting) 문법

CSS 규칙 안에서 CSS 규칙을 만드는 것을 말한다.

 

& 선택자

부모 선택자를 의미한다.

 

컴포넌트 선택자

${ComponentName} 같이 컴포넌트 자체를 템플릿 리터럴 안에 넣어주면 된다.

---

styled() 함수

Styled Components로 만들어진 컴포넌트를 상속한다.

import styled from 'styled-components';

const SIZES = {
  large: 24,
  medium: 20,
  small: 16,
};

const Button = styled.button`
  background-color: #6750a4;
  border: none;
  color: #ffffff;
  font-size: ${({ size }) => SIZES[size] ?? SIZES['medium']}px;
  padding: 16px;

  ${({ round }) =>
    round
      ? `
      border-radius: 9999px;
    `
      : `
      border-radius: 3px;
    `}

  &:hover,
  &:active {
    background-color: #463770;
  }
`;

export default Button;
-------------------------------------------------
import styled from 'styled-components';
import Button from './Button';

const SubmitButton = styled(Button)`
  background-color: #de117d;
  display: block;
  margin: 0 auto;
  width: 200px;

  &:hover {
    background-color: #f5070f;
  }
`;

function App() {
  return (
    <div>
      <SubmitButton>계속하기</SubmitButton>
    </div>
  );
}

export default App;

---

css 함수

스타일 재사용. 함수를 삽입하지 않은 단순한 문자열이라면 일반적인 템플릿 리터럴을 사용해도 되지만, CSS 함수를 사용하도록 습관화하는 것을 권장한다.

const boxShadow = `
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
`;

-------- css 함수화 ---------
const boxShadow = css`
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
`;

---

emotion

---

참고 자료

https://fe-developers.kakaoent.com/2022/220210-css-in-kakaowebtoon/

카카오웹툰은 CSS를 어떻게 작성하고 있을까? | 카카오엔터테인먼트 FE 기술블로그

https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EC%9A%B0%EB%A6%AC%EA%B0%80-css-in-js%EC%99%80-%ED%97%A4%EC%96%B4%EC%A7%80%EB%8A%94-%EC%9D%B4%EC%9C%A0-a2e726d6ace6

(번역) 우리가 CSS-in-JS와 헤어지는 이유