React를 사용하기 전에도 혹시 CSS 파일을 작성하는데 불편하다고 느낀 적이 없으신가요? 예를 들어, 중복되는 속성이 있지만 그렇다고 완전히 속성이 일치하는 것이 아니라서 길게 코드를 작성해야 했다거나, 아니면 두 개의 CSS 파일을 불러와서 사용해야 할 때 클래스 이름이 혹시라도 겹치진 않는지 일일이 확인을 해야 했다거나 등등... 저는 특히 '코드의 가독성'측면에서 저는 불편함을 많이 느꼈던 것 같고, 이렇다보니 유지보수할 때도 복잡해 했던 것 같습니다... 그런데 React라고 다를까요? 심지어 React로는 더 복잡하고 규모가 큰 프로젝트를 진행하게 될텐데 그 많은 CSS 파일을 관리할 생각하니 머리가 터질 것 같습니다.

💡🙂 하지만, React에는 CSS Module, Sass, Styled-Component가 있죠✌️

이미 많은 선배 개발자분들께서 저처럼, 아니 저보다 훨씬 이러한 불편함을 느끼고 고민을 많이 하셨던 덕분에, 다행히도 React에서는 전과 달리 CSS 파일을 보다 쉽고 편리하게 관리하며, 스타일을 적용할 수 있게 됐습니다.

1. CSS Module
2. Sass
3. Styled-Component

1. CSS Module

CSS Module은 CSS 파일을 불러와서 사용할 때 클래스명을 고유 이름으로 변환해주어 서로 다른 컴포넌트끼리 동일한 클래스명을 사용하더라도 중복 처리되지 않아 오류가 발생하지 않습니다.

사용법:

0. CSS 파일명 작성

[파일명].moudle.css

1. 파일.module.css 작성하기

.container {
    display: flex;
}

.box {
    width: 100px;
    height: 100px;
}

.red {
    background-color: red;
}

.orange {
    background-color: orange;
}

.yellowgreen {
    background-color: yellowgreen;
}

2. 컴포넌트 파일에 import해서 적용하기 : styles.선택자

한 개의 styles.선택자만 작성할 수도 있고, 여러 개를 적용하고자 할 경우 아래처럼 연결시켜 작성할 수도 있습니다.

import React from 'react';
import styles from '../Styles/CssModule.module.css'

const CssModule = () => {
    console.log(styles)
    return (
        <div className={styles.container}>
            <div className={[styles.box, styles.red].join(' ')}></div>
            <div className={[styles.box, styles.orange].join(' ')}></div>
            <div className={`${styles.box} ${styles.yellowgreen}`}></div>
        </div>
    );
};

export default CssModule;

2. Sass 확장자 .scss

Sass는 CSS의 코드 복잡성이나 유지보수하기 불편한 점을 보완하고자 등장한 개념으로, 컴파일 과정에서 CSS 파일을 빌드해주는 CSS확장 언어 & 전처리기입니다. 쉽게 말해 CSS를 전보다 더 효율적으로 작성할 수 있도록 돕는 일종의 도구입니다.

Sass는 CSS 문법과 비슷하지만 약간 다릅니다.

• Sass는 중괄호를 사용하지 않고 탭을 이용해서 작성합니다.
• $기로를 활용해서 변수를 만들어 활용할 수 있습니다.
• clac()를 사용하지 않고도 단위가 다른 두 값의 간단한 더하기와 빼기 같은 연산도 가능합니다.
• 함수는 한번 만들면 여러 곳에 믹스해서 사용할 수 있습니다. (@mixin, @include)
• 선택자를 중첩해서 사용이 가능해 코드 중복을 줄일 수 있습니다.
• 기존 선택자 스타일을 다른 선택자에게 상속할 수 있습니다.
• 파일명 앞에 _ (under bar)를 붙여주면 CSS로 컴파일되지 않습니다.

사용법:

0. 설치

npm i sass

1.SassComponent.js

import React from 'react';
import '../Styles/SassComponent.scss'

const SassComponent = () => {
    return (
        <>
        <div className='container'>
            <h1>Sass Styling</h1>
            <div className='box red'></div>
            <div className='box orange'></div>
            <div className='box yellowgreen'></div>
        </div>
        <button className='btn'>Button</button>
        <button className='btn-primary'>Button Primary</button>
        </>
    );
};

export default SassComponent;

2. 변수 선언

별도로 변수 scss파일을 생성하여 이 안에 작성해보겠습니다.

• _variables.scss

$color-red: red;
$color-yellowgreen: yellowgreen;
$color-orange: orange;

$animation-duration: 0.4s

3. 믹스인(함수) 선언 : @mixin

믹스인도 따로 파일을 만들어서 작성해봅니다.

• _utils.scss

@mixin box($size) {
    width: $size;
    height: $size;
}

4. 믹스인(함수) 호출 : @include

• SassComponent.scss

@import './utils';
@import './variables';

.container {
	display: flex;

	.box{
        @include box(150px);
    }
}

5. 선택자 중첩 : &

.container {
    display: flex;

    .box{
        @include box(150px);

        &.red {
            // $.red = .box.red
            background-color: $color-red;
        }

        &.orange {
            background-color: $color-orange;
        }

        &.yellowgreen {
            background-color: $color-yellowgreen;
        }
    }
}

6. 연산

//.box.hover

&:hover {
			// _variables.scss에 선언했던 $animation-duration 활용
            $box-animation: $animation-duration * 2;
            transform: translateY(-20px);
            transition: transform $box-animation;
            
        }
        

7. 상속 : @extend

.btn {
    padding: 10px;
    margin: 10px;
    border: 1px solid black;
}

.btn-primary{
    @extend .btn;
    background-color: pink;
}

Sass Map() 함수 사용법 링크

Sass에서 Map() 사용하는 방법

---

3. Styled-Components

styled-components, emotion, styled-jsx 등, React 어플리케이션에서 스타일을 작성할 수 있는 CSS-in-JS 라이브러리들이 있습니다. Styled-Components는 그 중 하나이고, 이를 사용하는 이유는 컴포넌트 기반으로 스타일을 관리하고 또 동적으로 적용하기 위함입니다.

컴포넌트 기반이기에 각각의 컴포넌트에 중복되는 id명이 존재하더라도 스타일을 독립적으로 관리할 수 있고, 재사용이 가능합니다. (ex. 컴포넌트 안에 import해서 사용할 수 잇는 것은 물론, 기존에 만들어뒀던 특정 태그의 스타일을 다른 종류의 태그에 상속할 때as라는 속성으로 태그 변경을 하면 다른 태그에서도 동일한 스타일을 그대로 적용할 수 있습니다.) 그리고 Styled-Components는 글로벌 스타일 및 테마 메소드를 지원해줘서 적용하기 쉽다고도 합니다.

Styled-Components는 JS로 스타일을 적용하는 것이다보니 CSS로 작성할 때완 달리 오류가 자주 발생할 수 있겠다는 생각이 들었는데, 역시나 Jest라는 테스팅 라이브러를 이용하면 Styled-Componentsf로 적용한 스타일을 테스트할 수 있다고 합니다. (최고👍!)

사용법

0. npm 설치와 import

npm i styled-components

import styled from 'styled-components'

1. styled 컴포넌트 작성

💡컴포넌트이기에 styled-component 또한 부모로부터 props로 값을 전달받아 사용할 수도 있습니다.

• StyledComponent.js

const StyledContainer = styled.div `
    display : flex;
`;

const StyledBox = styled.div `
    width: 100px;
    height: 100px;
    background-color: ${(props) => props.bgColor || 'blue'};

    &:hover{
        transform: translateY(-20px);
    }
`;

2. 스타일드 컴포넌트 태그 작성

스타일 컴포넌트를 중첩해서 사용하려고 할 때는 아래처럼 스타일 컴포넌트 태그 안에 또 하나의 스타일 컴포넌트를 넣어서 활용해주면 됩니다.

const StyledComponent = () => {
    return (
        <StyledContainer >
            <StyledBox bgColor='red'></StyledBox>
            <StyledBox bgColor='red'></StyledBox>
            <StyledBox></StyledBox>
        </StyledContainer>
        
    );
};

export default StyledComponent;