리액트를 다루는 기술 + typescript 9장 2

Sass 사용하기

• 내부에 Sass를 위한 함수를 만들 수 있습니다.

• yarn add sass 하면 sass 와 scss 파일 둘 다 사용이 가능합니다.

• 예제를 위해 yarn add sass 를 콘솔에 실행합니다.

• 리액트를 다루는 기술 책에 따르면 .scss 문법이 더 사용되므로,
  .scss를 사용하여 스타일을 작성한다고 합니다.

• src 디렉토리에 예제를 만들도록 합니다.

SassComponent.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;
}

.SassComponent{
    display : flex;
    .box{ //일반 CSS에서는 .SassComponent .box 와 마찬가지
        background : red;
        cursor : pointer;
        transition : all 0.3s ease-in;

        &.red{
            // .red 클래스가 .box와 함께 사용되었을 때!
            // ex <div className"box red"/>
            background : red;

            @include square(1);
            // 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 {
            // .box에 마우스를 올렸을 때!
            background : black;
        }
    }
}

1. • 만들어 두었던 @mixin 함수를 이용하여 속성을 가져오는 모습입니다.

   • 이처럼, 반복되는 스타일 블록을 재사용하면 코드를 획기적으로 줄일 수 있습니다.

그럼, @include square(1)을 선언한 &.red의 결과만 봐볼까요?

&.red{
    background : $red;
    width : 32px;
    height : 32px;
}

믹스인 함수의 결과도 봤으니 적용할 예제를 만듭니다!

SassComponent.tsx

import './SassComponent.scss';

const SassComponent = () : JSX.Element => {
    return (
        <div className="SassComponent">
            <div className="box red" />
            <div className="box orange" />
            <div className="box yellow" />
            <div className="box green" />
            <div className="box blue" />
            <div className="box indigo" />
            <div className="box violet" />
        </div>
    )
}
export default SassComponent;

이 컴포넌트를 렌더링하기 위해 App.tsx에서 import 하겠습니다

App.tsx

import React, { Component } from 'react';
import SassComponent from './SassComponent';

class App extends Component {
    render() : JSX.Element {
        return (
            <div>
                <SassComponent />
            </div>
        )
    }
}
export default App;

---

• @mixin이라는 scss의 함수 블록에 변수로 점점 큰 변수를 넣음에 따라
  색깔 블록이 점점 증가하는 형태를 볼 수 있습니다.

---

sass-loader 설정 커스텀

• Typescript에서는 굉장히 어려운 작업입니다.

• 현재 이 설정을 타입스크립트 환경에서 건드는 것은 난이도가 너무 급상승하므로,
  추후 챕터 20장의 서버 사이드 렌더링에서 다루도록 하겠습니다.

• @types/가 붙은 정식 모듈조차 커스텀 시 오류나는 경우가 굉장히 많으므로,
  도전을 원하시는 분은 책에 써져있는 것을 바탕으로 도전해 보시기 바랍니다!

• 책에 써져있는 라이브러리는 Typescript를 지원하지 않는 경우가 많습니다!
  그러므로 프로젝트가 잘못 될 경우 프로젝트를 다시 생성하시는 것을 추천합니다.

---