[React] 컴포넌트 스타일링

목차

컴포넌트 스타일링: CSS와 Sass를 활용한 React 스타일링 전략 🎨👩‍🎨

안녕하세요, 웹 개발에 열정을 가진 모든 분들! React 애플리케이션에서 컴포넌트를 스타일링하는 것은 애플리케이션의 외관을 정의하고 사용자 경험을 향상시키는 중요한 단계입니다. 이번 포스트에서는 CSS와 Sass를 사용하여 React 컴포넌트를 스타일링하는 방법과 그 장점에 대해 알아보겠습니다.

---

CSS in React: 기본적인 접근 방법

전역 스타일 시트

• 전통적인 방법: 전역 CSS 파일을 사용하여 애플리케이션 전체에 스타일을 적용할 수 있습니다.
• 장점: 쉽고 빠르게 스타일을 적용할 수 있습니다.
• 단점: CSS 규칙이 전역적으로 적용되어 스타일 충돌이 발생할 수 있습니다.

모듈 스타일

• CSS 모듈: CSS를 모듈화하여 컴포넌트별로 독립적인 스타일을 적용할 수 있습니다.
• 장점: 스타일 충돌을 방지하고, 컴포넌트 재사용성을 높일 수 있습니다.
• 사용 예:

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

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

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

 

Sass in React: CSS의 확장

Sass(SCSS)는 CSS의 한계를 극복하기 위해 만들어진 프리프로세서(preprocessor)입니다. 변수, 중첩, 믹스인(mixins) 등의 기능을 제공하여 CSS를 보다 효율적으로 작성할 수 있게 합니다.

Sass 사용의 장점

• 변수 사용: 색상, 폰트 등을 변수로 저장하여 재사용할 수 있습니다.
• 중첩 규칙: 선택자를 부모-자식 관계로 중첩하여 코드의 가독성을 높일 수 있습니다.
• 믹스인: 스타일 블록을 정의하여 여러 곳에서 재사용할 수 있습니다.

React에서 Sass 사용하기

1. Sass를 프로젝트에 추가합니다.

npm install sass

2. .scss 또는 .sass 확장자를 사용하여 Sass 파일을 작성합니다.

// Button.module.scss
$button-color: blue;

.button {
  background-color: $button-color;
  color: white;
  &:hover {
    background-color: darken($button-color, 10%);
  }
}

3. Sass 모듈을 React 컴포넌트에서 import하여 사용합니다.

import React from 'react';
import styles from './Button.module.scss';

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

 

마무리하며...

CSS와 Sass를 사용한 컴포넌트 스타일링은 React 애플리케이션의 외관을 꾸미고 사용자 경험을 향상시키는 데 있어 핵심적인 역할을 합니다. CSS 모듈과 Sass의 기능을 활용하여, 스타일 충돌 없이 효율적이고 유지보수가 용이한 스타일 시스템을 구축해 보세요.

---

Reference:

GitHub - css-modules/css-modules: Documentation about css-modules

Sass: Syntactically Awesome Style Sheets

Styling and CSS – React