프론트엔드 노트

프론트엔드 개발에서 스타일을 적용하는 방법은 다양합니다. 그 중에서도 CSS 모듈과 CSS-in-JS는 최근 많이 사용되고 있는 두 가지 접근 방식입니다. 둘 다 각각의 장점이 있지만, 어떤 상황에서 최적의 선택이 될 수 있는지에 대해 알아보겠습니다.

CSS 모듈

CSS 모듈은 CSS 파일을 컴포넌트 단위로 분리하여 사용할 수 있도록 돕는 기술입니다. 각 CSS 클래스는 해당 컴포넌트 내에서만 유효하도록 제한되어, 전역 네임스페이스의 오염을 피할 수 있습니다. 이를 통해 스타일 충돌을 방지하고, 코드의 가독성을 높일 수 있습니다.

장점

전역 네임스페이스 오염 방지: 클래스 이름이 컴포넌트에 국한되어 있어, 다른 컴포넌트와의 스타일 충돌을 피할 수 있습니다.
기존 CSS 생태계 활용: CSS 모듈은 기존의 CSS와 호환성이 뛰어나므로, CSS 작성에 익숙한 개발자에게 적합합니다.
단순한 사용법: CSS 파일을 작성하고, 해당 모듈을 import하여 사용하는 방식은 직관적입니다.

단점

동적 스타일링의 어려움: CSS 모듈은 정적인 스타일을 주로 다루기 때문에, 동적인 스타일링 구현이 어려울 수 있습니다.
복잡한 테마 적용: 여러 테마를 적용해야 할 경우, CSS 모듈만으로는 관리가 번거로울 수 있습니다.

/ styles.module.css /
.button {
  background-color: blue;
  color: white;
}

.buttonSuccess {
  background-color: green;
}

// Button.js
import React from 'react';
import styles from './styles.module.css';

const Button = ({ success }) => {
  return (
    <button className={success ? styles.buttonSuccess : styles.button}>
      클릭하세요
    </button>
  );
};

export default Button;

CSS-in-JS

CSS-in-JS는 JavaScript 내에서 CSS를 작성하는 접근 방식으로, 스타일을 컴포넌트에 직접 결합할 수 있게 해줍니다. Styled Components, Emotion과 같은 라이브러리를 통해 쉽게 구현할 수 있습니다.

장점

동적 스타일링 용이: JavaScript의 논리를 사용할 수 있어, 조건부 스타일링과 다이내믹한 테마 변경이 용이합니다.
Scoped 스타일링: 각 컴포넌트 내에서 스타일이 적용되어, 전역 클래스 이름 충돌을 방지합니다.
모듈화된 코드: 스타일과 컴포넌트를 함께 관리할 수 있어 코드의 가독성이 높아집니다.

단점

성능 이슈: 런타임에 스타일을 생성하기 때문에, 성능 저하를 유발할 수 있습니다. 특히 많은 컴포넌트를 사용할 경우 문제가 될 수 있습니다.
배우기 어려움: 기존 CSS와는 다른 문법을 사용하기 때문에, 익숙하지 않은 개발자에게는 학습 비용이 발생할 수 있습니다.

// Button.js
import styled from 'styled-components';

const Button = styled.button
  background-color: ${({ success }) => (success ? 'green' : 'blue')};
  color: white;
;

const MyButton = ({ success }) => {
  return <Button success={success}>클릭하세요</Button>;
};

export default MyButton;

어떤 상황에 최적일까?

CSS 모듈은 전통적인 CSS 방식에 익숙한 개발자나 대규모 프로젝트에서 전역 네임스페이스를 관리해야 하는 경우에 적합합니다. 예를 들어, 팀 내에서 여러 개발자가 작업할 때 각자의 스타일을 안전하게 유지하면서 동시에 프로젝트의 유지보수성을 높일 수 있습니다.

반면, CSS-in-JS는 동적인 스타일링이 필요하거나, CSS와 JavaScript를 밀접하게 결합해야 하는 경우에 유리합니다. 최근에는 테마 스위칭과 같은 기능이 필요할 때 유용하게 쓰이고 있습니다. 또한, 작은 규모의 프로젝트에서는 코드의 간결함과 가독성을 위해 CSS-in-JS를 선호하는 경우가 많습니다.

마무리

CSS 모듈과 CSS-in-JS는 각각의 장단점이 있으며, 사용자의 필요와 프로젝트의 성격에 따라 적절하게 선택해야 합니다. CSS 모듈은 전통적인 CSS 방식을 유지하면서 안정성을 제공하고, CSS-in-JS는 동적이고 개별화된 스타일링을 가능하게 합니다. 최적의 선택을 위해서는 프로젝트의 요구사항을 면밀히 분석하고, 상황에 맞는 기술 스택을 구성하는 것이 중요합니다.

CSS 모듈 vs CSS-in-JS, 어떤 상황에 최적일까?

CSS 모듈

장점

단점

CSS-in-JS

장점

단점

어떤 상황에 최적일까?

마무리