리액트 컴포넌트 스타일링 방식

CSS

import "./style.css"; 를 작성하여 불러오는 간단한 방식

SASS

복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐 만 아니라, 가독성도 높여주어 유지보수를 해준다.

.sass 와 .scss 차이

.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 확장자는 기존 CSS를 작성하는 방식과 비슷하다.

CSS Module

CSS Module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값, 즉 [파일 이름]_[클래스 이름]__[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술

CSSModuel.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;

언제 쓰느냐?

레거시 프로젝트에 리액트를 도입할 때 (기존 프로젝트에 있던 CSS 클래스와 이름이 중복되어도 스타일이 꼬이지 않게 해줍니다.)
CSS 클래스를 중복되지 않게 작성하기 위하여 CSS 클래스 네이밍 규칙을 만들기 귀찮을 때

styled components

javascript에서 css를 사용 할 수 있도록 도와주는 스타일링 프레임워크

css stlye

styled-components를 사용한 방식

styled-components는 style이 적용된 Component를 직접 생성하기 때문에, 스타일링을 위한 코드 사용량이 줄어드는 효과가 있다.
기존 css의 사용법보다 가독성도 높다.