[React] Styled-components VS CSS Module

JINJIN·2023년 12월 7일

React style

React

목록 보기

6/10

대표적인 리액트 컴포넌트 스타일링 방법들에 대해서 자세히 알아봅시다~

컴포넌트 스타일링

리액트에서 컴포넌트를 스타일링하는 다양한 방법들이 있으며, 각각은 특정한 사용 사례와 개발 스타일에 적합합니다.

저도 원래는 가장 기초적인 방법인 CSS 파일 사용, 그리고 Sass 정도만 알고 있었는데 생각보다 많은 방법이 있더라고요! 오늘은 그 중에서 가장 유명한 방법 2가지 Styled-components와 CSS Module을 알아보는 시간을 가지겠습니다~

Styled-components

공식 홈페이지

Styled-components는 React 애플리케이션에 스타일을 적용하기 위한 CSS-in-JS 라이브러리입니다. CSS-in-JS는 스타일을 자바스크립트 파일 내에 작성하고 컴포넌트와 결합하는 방식을 말합니다. Styled-components는 이 패러다임을 활용하여 컴포넌트의 스타일을 자바스크립트와 함께 선언적으로 작성하고, 각 컴포넌트에 고유한 클래스 이름을 부여함으로써 스타일의 격리를 달성합니다.

Styled-components의 특징

CSS-in-JS 라이브러리 중 하나로, 자바스크립트 파일 내부에 스타일을 작성합니다.
컴포넌트 기반의 스타일링을 제공하여, 각 컴포넌트에 대한 스타일을 캡슐화합니다.
ES6의 태그된 템플릿 리터럴을 사용하여 스타일을 적용합니다.
props를 기반으로 하는 동적 스타일링이 가능합니다.
서버 사이드 렌더링을 지원하여, SEO와 초기 페이지 로드 성능을 향상시킵니다.

Styled-components 예시

import styled from 'styled-components';

// Styled-component를 사용하여 스타일링된 버튼 컴포넌트
const StyledButton = styled.button`
  background-color: ${props => props.primary ? 'navy' : 'white'};
  color: ${props => props.primary ? 'white' : 'navy'};
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  margin: 5px;
  cursor: pointer;

  &:hover {
    background-color: ${props => props.primary ? 'blue' : 'lightgray'};
  }
`;

export default function Button({ primary, label }) {
  return <StyledButton primary={primary}>{label}</StyledButton>;
}

Styled-components를 사용하면 위 예시 코드처럼 컴포넌트와 스타일이 한 파일 안에서 관리됩니다. 이처럼 JS 파일 안에 CSS 코드가 있는 형식을 CSS-in-JS라고 부릅니다.

또한, props를 이용하여 동적으로 스타일을 변경할 수 있습니다.
그리고 또 한가지 특이점이라면 백틱(``)을 사용한 템플릿 리터럴 방식으로 CSS를 작성한다는 특징이 있습니다.

Styled-components의 장점

컴포넌트 단위로 스타일을 관리하여 코드의 재사용성과 유지보수성이 높아집니다.
스타일 충돌을 피할 수 있으며, 전역 스타일의 영향으로부터 벗어날 수 있습니다.
테마와 같은 전역 스타일 변수를 쉽게 관리할 수 있습니다.
실제 CSS 문법을 사용하므로, CSS를 알고 있는 개발자에게 친숙합니다.

CSS Module

CSS Module은 전통적인 CSS 파일을 사용하지만, 빌드 시 고유한 이름을 가진 클래스를 생성하여 스타일의 격리를 제공하는 방식입니다. React 프로젝트를 생성할 때 일반적으로 사용되는 create-react-app은 기본적으로 CSS Module을 지원합니다.

CSS Module을 사용하면, 스타일 시트의 클래스 이름이 로컬 스코프로 제한되어, 다른 컴포넌트의 같은 이름의 클래스와 충돌하지 않습니다.

CSS Module의 특징

CSS를 모듈 방식으로 작성하여, 클래스 이름이 고유하게 컴파일되어 충돌을 방지합니다.
기존의 CSS 파일을 사용하며, .module.css 확장자를 가진 파일로 작성합니다.
CSS Module을 지원하는 번들러(Webpack 등)를 통해 클래스 이름을 고유하게 변환합니다.
자바스크립트 파일에서 CSS Module을 import하여 사용하고, 각 클래스를 객체의 프로퍼티처럼 참조합니다.

CSS Module 예시

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

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

const Button = () => <button className={styles.button}>Click me</button>;

export default Button;

CSS 모듈을 사용하려면, 다음과 같은 방법으로 CSS 파일을 작성하고 컴포넌트에서 import하면 됩니다.

CSS 모듈 파일 생성
- 파일 이름을 [name].module.css 형식으로 지정합니다.
  예를 들어, Button.module.css와 같이 작성합니다.
CSS 클래스 정의
- 이 파일 내에서 일반 CSS와 같은 방식으로 스타일을 정의합니다.
리액트 컴포넌트에서 사용
- CSS Module을 import하여 사용합니다. import 시에는 CSS 파일이 객체로 취급되며, 이 객체의 속성을 통해 클래스 이름에 접근할 수 있습니다.

CSS Module의 장점

전역 스타일의 영향 없이 CSS 클래스의 로컬 스코프를 유지할 수 있습니다.
기존의 CSS 작성 방식을 그대로 사용할 수 있으므로, 별도의 학습이 필요하지 않습니다.
컴포넌트 내부에서 클래스 이름을 자동으로 고유화하여 충돌을 방지합니다.

Styled-components와 CSS Module의 차이점

스타일 정의 위치
- Styled-components는 JS 파일 내부에 스타일을 포함하지만, CSS Module은 별도의 CSS 파일을 사용합니다.
스타일 적용 방식
- Styled-components는 컴포넌트를 생성하여 스타일을 적용하는 반면, CSS Module은 기존의 클래스 기반 방식을 따릅니다.
필요한 도구
- CSS Module은 모듈 번들러가 필요하지만, Styled-components는 라이브러리 자체에서 필요한 기능을 제공합니다.
동적 스타일링
- Styled-components는 JS의 강력한 기능을 활용하여 보다 동적인 스타일링이 가능합니다.