CSS-in-JS의 장단점

SeanKim·2023년 12월 5일

CSS CSS in JS 스프린트프론트엔드2기 취업까지달린다 코드잇스프린트

코드잇 스프린트 : 프론트엔드 2기를 수강하며 작성했습니다.

8주차 위클리 미션 과제입니다.

CSS-in-JS란 무엇인가

CSS-in-JS는 JavaScript로 구성 요소의 스타일을 지정하는 스타일링 기술이다. 이 JavaScript의 코드를 해석해가면 CSS가 생성되어 DOM<style> 에 첨부된다. 선언적이고 유지 관리 가능한 방식으로 스타일을 설명하기 위해 JavaScript를 사용하여 CSS를 컴포넌트 자체로 추상화할 수 있다.
출처 : 위키피디아 https://en.wikipedia.org/wiki/CSS-in-JS

CSS-in-JS는 즉 자바스크립트로 css 스타일을 지정하는 기술이다. 기존의 css 파일을 생성해 스타일을 만드는 방식과 달리 자바스크립트 하나로 스타일과 기능 동작, jsx 등을 이용한다면 html 요소 까지 전부 다룰 수 있다.

CSS-in-JS 라이브러리들

이 CSS-in-JS를 지원하는 라이브러리들이 있다.

styled-components
emotion
JSS
tailwind-css

CSS-in-JS의 장점

1. 유지보수 용이

기존엔 CSS 파일을 따로 가지게 되어 CSS 문서도 유지보수의 대상에 들어갔지만, CSS-in-JS를 사용하면 컴포넌트 단위로 스타일을 적용하기 때문에, 컴포넌트 모듈 하나에서 스타일과 동작을 한번에 관리할 수 있다. 스타일을 고치기 위해 불필요하게 프로젝트 폴더에서 왔다 갔다 하는 일을 줄일 수 있다.

2. 스타일 충돌 방지

일반 CSS 파일을 사용해서 스타일을 지정해줬을 때는 본의 아니게 클래스 명이 겹치게 될 경우 의도치 않은 스타일 충돌이 일어나게 된다. 이를 방지하기 위해 BEM 작명 기법이나, module CSS를 사용할 수 있지만, 컴포넌트 자체에 스타일을 지정하는 방식으로 충돌을 쉽게 막을 수 있다.

3. 스타일 상속의 용이

styled-components 기준으로는 버튼의 padding, font-family와 같은 공통 속성은 그대로 가져가고(상속), 버튼의 배경 색만 다르게 주고 싶을 때 상속을 이용하면 쉽게 바꿀 수 있다.

const Button = styled.button`
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 16px;

  background-color: #6500c3;
  color: #ffffff;
`;
const StyledButton = styled(Button)`
  background-color: #fee500;
  color: rgba(0, 0, 0, 0.8);
`;

예를 들어 StyledButton은 Button 컴포넌트의 스타일을 공유한 상태로 고유의 스타일을 추가해 나갈 수 있다.

4. 조건문을 활용한 동적인 스타일

const Button = styled.button`
  border-radius: ${({ round }) => (round ? '9999px' : '8px')};
`;

css의 스타일을 지정한다고 하지만, 우선 CSS-in-JS는 자바스크립트의 문법을 활용하므로 조건문을 활용해 스타일을 다르게 지정해줄 수 있다.

단점

1. 새로운 것을 또 배워야 하는 리스크

기존 css와 javascript에 익숙해진 사용자이더라도, CSS-in-JS만의 문법을 새로 배워야 한다는 문제가 있다.
예를들어 스타일을 동적으로 바꾸는 기능을 구현하려면 기존에 클래스 명을 추가했다 제거하는 방식으로 작성 할 수 있었지만,
CSS-in-JS에선 props를 전달받아 조건을 활용하는 식으로 이를 적용하기 위한 문법을 배워야한다.

2. 코드가 길어진다

상위 컴포넌트에서는 레이아웃 배치를 위해 css를 작성해야 한다. 만약 CSS-in-JS를 이용한다면 그만큼 스타일을 위한 코드가 추가될 것이고, 상위 컴포넌트에서는 state나 props, 그리고 이를 조작하는 핸들러 함수들도 다뤄야 하는데, 이렇게 되면 코드가 점점 늘어나는 것을 볼 수 있을 것이다.

3. 자동완성이 안됨

styled-components 기준으로는 그냥 npm 패키지를 설치해 사용할 시 JS에서는 문자열로 취급하기 때문에, 자동완성이 되지 않는다.
다행히 vscode의 마켓 플레이스에서 styled-components 공식 익스텐션을 다운 받으면 css처럼 자동 완성 기능을 제공하지만, 이를 다운 받아야 자동완성이 된다는 것은 누군가에겐 꽤나 귀찮은 일이다.