SCSS - React 에서 스타일링 하기

SCSS - React 에서 스타일링 하기

2025. 4. 15. 14:36ㆍCoding Study/React

1. 프론트 엔드에서 사용하는 세 가지 언어

HTML
CSS
Javascript

React 에서는 HTML 과 Javascript 를 JSX라는 문법으로 한파일에 작성이 가능하지만, CSS 는 여전히

별도의 파일에 작성.

하지만 React 에서 CSS 외에도 다양한 스타일링 방법이 존재

2. CSS 의 단점과 SCSS 이 등장

CSS 장점

배우기 쉽고 간단하다.
별도의 설정이나 설치 없이 브라우저가 바로 인식
로딩속도가 빠르다

CSS 단점

코드의 중복이 많다.
재사용성이 낮다.
구조화가 어려워 유지보수가 힘들다.

3. SASS 와 SCSS 의 차이점

1) SASS : Syntactically Awesome Style Sheets

(문법적으로 짱멋진 스타일 시트 )

2) SCSS : Sassy CSS

(깔쌈한? CSS)

SASS 와 SCSS 는 실질적으로 같은 기술이라고 생각 하면 된다.

왜냐 하면 SCSS 는 SASS 의 세 번째 버전에서 등장한 기술이기 때문이다.

두기술의 차이는 중괄호와 들여쓰기 사용에 있어서 차이가 있다.

일단은 가독성이 좋아 보이는 최신의 기술인 SCSS을 사용할 예정이다.

3) SCSS 설치방법

- sass의 최신 버전이기 때문에 설치할 때에는 sass 로 설치

npm install sass

- CSS 파일 확장자 변경

. css → .scss

- import 파일 변경

기존 import './App.css' →. import './App.scss' 변경

4. SCSS 변수 사용하기

변수 도입 효과

중복 코드 제거
코드 가독성 향상
유지보수 간편화
의미 있는 변수명으로 코드 직관성 증가

변수명을 보면 어떤 용도인지 감이 바로 오기 때문에 팀원 간 협업 시에도 유리하다.

1) 색상코드를 변수로 적용

$light-gray: rgb(240, 240, 240);
$dark-gray: rgb(100, 100, 100);

.element1 {
  background-color: $light-gray;
  color: $dark-gray;
}

2) 폰트 사이즈를 변수로 적용

$font-big: 50px;
$font-mid: 40px;
$font-small: 30px;

h2 {
  font-size: $font-big;
}
ul {
  font-size: $font-mid;
}
li {
  font-size: $font-small;
}

✅ SCSS 사용 정리

장점	설명
✅ 변수 사용 가능	중복 제거 및 유지보수 편리
✅ CSS 문법과 호환	기존 코드 그대로 사용 가능
✅ 가독성 상승	의미 있는 변수명, 구조화된 코드
✅ 팀 협업 효율 ↑	직관적인 코드로 의사소통 용이

5. SCSS 문법 - 중첩(Nesting)과 믹스인(Mixin)

1) 중첩

<HTML> 구조

div 안의 div 안의 Span 에 SCSS 로 적용 하고 싶다면

<div class="element">
  <div>
    <span>내용</span>
  </div>
</div>

<일반 CSS 적용방식>

셀렉터를 반복해서 작성해야 해서 중복도 많고 가독성이 떨어짐

.element {
  color: black;
}

.element div {
  font-weight: bold;
}

.element div span {
  color: red;
}

자바스크립트의 객체 안에 객체를 넣는 구조처럼, HTML의 계층 구조를 직관적으로 표현 가능

.element {
  color: black;

  div {
    font-weight: bold;

    span {
      color: red;
    }
  }
}

💡 중첩 문법의 장점

✅ 코드의 중복을 줄일 수 있다.
✅ CSS만 보고도 HTML 구조를 유추할 수 있다.
✅ 가독성, 유지보수 측면에서 훨씬 좋다.

2) 믹스인

자주 사용 되는 CSS 속성들을 묶어서 재사용 가능한 코드 블록으로 만들어줌

< 기본 사용 법>

@mixin flexColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.element1 {
  @include flexColumn;
}

.element2 {
  @include flexColumn;
}

<매개변수가 있는 Mixin>

@mixin flexMixin($direction, $align) {
  display: flex;
  flex-direction: $direction;
  align-items: $align;
}

.box1 {
  @include flexMixin(column, center);
}

.box2 {
  @include flexMixin(row, flex-start);
}

💡 Mixin의 장점

중복 코드 제거로 파일 용량과 유지보수 시간 절약
다양한 속성 조합을 인자 값으로 자유롭게 설정
자바스크립트의 함수처럼 재사용성과 확장성↑

✅ 중첩/믹스인 정리

기능	주요 목적	장점 요약
중첩	HTML 계층 구조에 따른 스타일링	가독성↑, 중복↓, 구조 파악 용이
믹스인	반복되는 스타일 재사용	코드 재사용↑, 유연한 스타일 적용 가능

'Coding Study > React' 카테고리의 다른 글

Tailwind CSS - React 에서 스타일링하기 3 (1)	2025.04.17
Styled Component-React 에서 스타일링하기 2 (1)	2025.04.17
Custom Hook (0)	2025.04.11
React Component 생명 주기 (useEffect) (0)	2025.04.10
React Router 를 활용한 동물정보 사이트 만들기 (0)	2025.04.09

yhchoi의 블로그