Mixins을 활용한 스타일 동적 적용

아래 코드를 보면, className을 동적으로 부여하고 있는 것을 확인할 수 있다. 예를 들어, props로 넘어온 color가 blue라면 color-blue라는 클래스 이름을 부여하고, red라면 color-red라는 이름을 부여하는 것이다.

import classNames from 'classnames/bind'
import styles from './button.module.scss'
import type {Color} from '../types/colors'
const cx = classNames.bind(styles)

interface ButtonProps {
    children?: React.ReactNode
    color?: Color
    backgroundColor?: Color
    size?: 'small' | 'medium' | 'large'
    outlineColor?: Color
}

export function Button({
    children,
    color = 'adaptiveGrey50',
    backgroundColor = 'adaptiveBlue500',
    outlineColor = undefined,
    size = 'small',
}: ButtonProps = {}) {
    return (
        <button
            className={cx(
                'button',
                `color-${color}`,
                `bg-color-${backgroundColor}`,
                `outline-color-${outlineColor}`,
                styles[size],
            )}
        >
            {children}
        </button>
    )
}

 

이것이 어떻게 가능할지 생각해보니, scss의 mixin 속성으로 가능했다.

@mixin setGlobalColors($map) {
    @each $name, $value in $map {
        --#{$name}: #{$value};
    }
}

@mixin setColorClass($map) {
    @each $name, $value in $map {
        .color-#{$name} {
            color: $value;
        }
        .bg-color-#{$name} {
            background-color: $value;
        }
        .outline-color-#{$name} {
            border: 1px solid $value;
        }
    }
}

 

이쯤에서 mixin의 특징을 다시 살펴보자. 아래의 내용과 관련된 로직을 구현해야 한다면, mixin을 떠올려야겠다.

1. mixin은 재사용 가능한 스타일 블록을 정의한다.

2. SCSS에서 동일한 스타일이나 패턴을 여러 번 작성하지 않도록 도와준다.

3. 파라미터를 전달받아 동적으로 스타일을 생성할 수 있다.

4. @each 반복문을 통해 반복적인 스타일 부여 작업이 가능하다.