9. 컴포넌트 스타일링

---

리액트에서 컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있다

• 일반 CSS : 컴포넌트를 스탕ㄹ링하는 가장 기본적인 방식
• Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS문법을 사용하는 방식
• CSS Module : CSS 클래스들의 이름이 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션
• styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식

9-1. Sass

---

Sass에서는 두 가지 확장자 .scss와 sass를 지원한다

Sass

$font-stack: Helvetica, sans-serif
$primary-color: #333

body 
    font: 100% $font-stack
    color: $primary-color

Scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body{
    font: 100% $font-stack;
    color: $primary-color;
}

Sass는 중괄호와 세미콜론을 사용하지 않는데 비해 Scss는 그대로 사용하기 때문에 더 친숙하게 이용할 수 있다

9-1-1. 설치

---

우선 Sass를 CSS로 변환해주는 라이브러리를 설치해야한다

yarn add node-sass
npm install node-sass

9-1-2. Scss

---

@mixin

---

mixin은 반복되는 스타일 수식들을 함수처럼 계속 반복해서 쓸 수 있게 해준다

$red: #fa5252;
$orange: #fd7e14;
$yellow: #fcc419;
$green: #40c057;
$blue: #339af0;
$indigo: #5c7cfa;
$violet: #7950f2;

@mixin square($size) {
  $calculated: 32px * $size;
  width: $calculated;
  height: $calculated;
}

.SassComponent {
  display: flex;
  .box{
    background: red;
    cursor: pointer;
    transition: all 0.3s ease-in;
    &.red {
      background: $red;
      @include square(1);
    }
    &.orange {
      background: orange;
      @include square(2);
    }
    &.yellow {
      background: $yellow;
      @include square(3);
    }
    &.green {
      background: $green;
      @include square(4);
    }
    &.blue {
      background: $blue;
      @include square(5);
    }
    &.indigo {
      background: $indigo;
      @include square(6);
    }
    &.violet {
      background: $violet;
      @include square(7);
    }

    &:hover{
      background: black;
    }
  }
}

제일 윗부분에선 추후 사용할 컬러들을 변수에 지정해주고 있고

그 아래에는 사이즈값을 넘겨주면 그 크기만큼의 박스를 만들어주는 mixin을 선언해서 사용해주고 있다

@import ~

---

우리가 평소에 사용하는 그 import와 동일하게 사용하고 작동한다

// in utills.scss

$red: #fa5252;
$orange: #fd7e14;
$yellow: #fcc419;
$green: #40c057;
$blue: #339af0;
$indigo: #5c7cfa;
$violet: #7950f2;

@mixin square($size) {
  $calculated: 32px * $size;
  width: $calculated;
  height: $calculated;
}

// in SassComponent.scss 
@import "./utills";
.SassComponent {
  display: flex;
  .box{
    background: red;
    cursor: pointer;
    transition: all 0.3s ease-in;
    &.red {
      background: $red;
      @include square(1);
    }
    &.orange {
      background: orange;
      @include square(2);
    }
    &.yellow {
      background: $yellow;
      @include square(3);
    }
    &.green {
      background: $green;
      @include square(4);
    }
    &.blue {
      background: $blue;
      @include square(5);
    }
    &.indigo {
      background: $indigo;
      @include square(6);
    }
    &.violet {
      background: $violet;
      @include square(7);
    }

    &:hover{
      background: black;
    }
  }
}

다른 페이지에서도 컬러 변수들과 박스를 만드는 square mixin을 사용할 수 있으니까 다른 scss에서도 재사용할 수 있도록 분리시켰다

9-2. CSS Module

---

CSS Module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값으로 만들어주어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술이다

9-2-1. 사용법

---

확장자 명을 .module.css로 해주면 된다

// in CSSModule.module.css
.wrapper {
    background: black;
    padding: 1rem;
    color: white;
    font-size: 2rem;
}

:global .something {
    font-weight: 800;
    color: aqua;
}

이때 모듈css에 클래스 명을 정할 때는 어떻게 지을까 고민하지 않아도 된다 이유는 아래에서

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

const CSSModule = ()=>{
    return (
        <div className={styles.wrapper}>
            안녕하세요 저는 <span className='something'> CSS Module!</span>
        </div>
    );
}

export default CSSModule;

보다시피 CSSModule.module.css을 import해서 styles객체를 받아오게 되는데

styles.클래스명 으로 클래스를 선언해주면 그 클래스는 해당 스타일을 적용받게된다

:global로 선언한 클래스명은 something과 같이 모든 컴포넌트에서 바로 사용할 수 있다