[2025 겨울방학 React.js 스터디] 박현빈 # 3주차

sass

Sass(Syntactically Awesome Stylesheets)는 CSS의 한계를 보완하기 위해 등장한 CSS 전처리기(Preprocessor)이다. CSS는 웹 디자인을 위한 강력한 도구이지만, 변수, 중첩, 재사용성 부족 등의 한계로 인해 유지보수가 어려웠기에 이를 보완 하기 위해서 개발 되었다.

sass의 Mixins

믹스인은 Sass 언어 전체에서 가장 많이 사용되는 기능중 하나이며, 재사용성과 DRY 컴포넌트의 핵심이다. 반복되는 css 내용을 줄일 수 있는 방법으로서, sass의 문법이다. mixin은 인자를 받고자 사용하지만 인자가 없더라도 단순한 반복을 줄일 때에도 mixin을 사용할 수 있다. 

// 믹스인 을 사용하기 전 코드 반복되는 css를 확인할 수 있다. 
&.blue {
    background: $blue;
    &:hover {
      background: lighten($blue, 10%);
    }

    &:active {
      background: darken($blue, 10%);
    }
  }

  &.gray {
    background: $gray;
    &:hover {
      background: lighten($gray, 10%);
    }

    &:active {
      background: darken($gray, 10%);
    }
  }

  &.pink {
    background: $pink;
    &:hover {
      background: lighten($pink, 10%);
    }

    &:active {
      background: darken($pink, 10%);
    }
  }
  
  // 믹스인을 사용한 코드 반복되는 코드가 줄어서 직관성, 가독성이 증가한다.
@mixin button-color($color) {
	background: $color;
	&:hover {
    	background: lighten($color, 10%);
    }
    &:active {
    	background: darken($color, 10%);
    }
}

.Button {

  // 색상 관리
  &.blue {
    @include button-color($blue);
  }

  &.gray {
    @include button-color($gray);
  }

  &.pink {
    @include button-color($pink);
  }

classnamse 라이브러리 

조건부로 CSS 클래스를 넣어주고 싶을때 문자열의 조합으로 하는 것보다. classnames 라이브러리를 사용한다. classNames를 사용하면 조건부 스타일링을 할 때 함수의 인자에 문자열, 배열, 객체 등을 전달하여 손쉽게 문자열을 조합 할 수 있다. 

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
classNames(['foo', 'bar']); // => 'foo bar'

// 동시에 여러개의 타입으로 받아올 수 도 있습니다.
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// false, null, 0, undefined 는 무시됩니다.
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

classNames 모듈은 별도로 설치를 해줘여 하며 이용하기 전에 코드 상단에 모듈을 다음과 같이 호출해야 한다.

import classNames from 'classnames';

---

CSS Module

외부 CSS 파일을 참조하는 방식은 React 애플리케이션의 규모가 커질수록 여러 컴포넌트에서 사용된 CSS 클래스명이 서로 중복될 가능성이 높아진다. 만약 서로 다른 두 개의 CSS 파일에 동일한 이름의 CSS 클래스가 정의되어 있다면, 해당 클래스가 적용된 React 엘리먼트는 이 두 스타일이 모두 한꺼번에 적용된다.

이와 같은 문제점을 해결하기 위해 CSS Module을 사용할 수 있습니다. CSS Module은 CSS 클래스를 불러와 사용할 때 클래스명을 고유한 이름으로 자동 변환해줌으로써 CSS 클래스명이 서로 중첩되는 현상을 미연에 방지해 주는 기술입니다.

React에서 CSS Module을 적용하는 방법은 아주 간단하다. 별도의 설정 없이 CSS Module을 적용하고 싶은 CSS 파일의 이름을 아래와 같은 방식으로 작성하기만 하면 자동으로 적용된다.

[모듈명].module.css

React 컴포넌트에서 해당 CSS 파일을 불러올 때 선언된 CSS 클래스명은 모두 고유한 이름으로 자동 변환된다. 고유한 클래스명은 파일 경로, 파일 이름, 원래 작성한 클래스명, 해쉬값 등을 사용하여 자동 생성된다. 따라서 CSS Module을 사용하면 CSS 파일마다 고유한 네임스페이스를 자동으로 부여해 주기 때문에 각각의 React 컴포넌트는 완전히 분리된 스타일을 보장받게 된다.

CSS module은  별도 라이브러리 설치가 필요하지 않다. 해당 기능은 webpack에서 사용하는 css-loader에서 지원하며, CRA로 만든 프로젝트에는 이미 적용되어 있다. 

---

styled-components

• styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다.
• 본질적으로, styled-coponents 는 styled-components 라이브러리를 사용하여 리액트 컴포넌트를 쉽게 만들 수 있으며 Javascript 코드 내에서 일반 CSS로 구성 요소의 스타일을 지정할 수 있다.