React에서 SCSS 사용법: sass 설치와 활용 가이드

React 프로젝트에서 scss 사용하기

React 프로젝트를 진행하다 보면 CSS만으로는 한계가 느껴질 때가 많습니다. 특히 규모가 커질수록 스타일 관리가 복잡해지는데, 이때 유용하게 활용할 수 있는 도구가 바로 **scss(SASS)**입니다. scss는 CSS의 확장 문법으로, 변수, 중첩, 믹스인 등 다양한 기능을 제공해 효율적인 스타일링이 가능합니다. 이번 글에서는 React에서 scss 사용법을 단계별로 정리해보겠습니다.

React와 Sass(Scss)

 

---

scss 설치와 환경 설정

React 프로젝트에 scss를 적용하려면 가장 먼저 패키지를 설치해야 합니다.
아래 명령어로 설치를 진행합니다.

npm install sass

 
이후, 원하는 컴포넌트와 같은 경로에 App.scss 파일을 생성한 뒤 import 하면 됩니다.

/* App.scss */
$main-color: #3498db;

.app {
  background-color: $main-color;
  h1 {
    color: white;
    font-size: 24px;
  }
}

// App.js
import './App.scss';

function App() {
  return (
    <div className="app">
      <h1>Hello SCSS</h1>
    </div>
  );
}

export default App;

React와 SCSS 예시코드

---

scss 문법 활용하기

scss는 일반 CSS와 비교했을 때 훨씬 강력한 기능을 제공합니다.

• 변수: 색상, 폰트 크기 등 반복되는 값을 변수로 관리
• 중첩: 컴포넌트 구조와 유사한 스타일링 작성
• 믹스인(mixin): 자주 사용하는 스타일 묶음을 재사용

 

// mixins.scss
@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

// App.scss
.container {
  @include flexCenter;
  height: 100vh;
  background: #f5f5f5;
}

SCSS 변수와 믹스인 활용법

---

css module과 함께 사용하기

React에서 scss를 사용할 때 전역 스타일 충돌을 피하고 싶다면 css module과 함께 쓰는 것이 좋습니다.

 

/* App.module.scss */
.title {
  color: tomato;
  font-weight: bold;
}

// App.js
import styles from './App.module.scss';

function App() {
  return <h1 className={styles.title}>SCSS Module Example</h1>;
}

 

---

sass와 scss의 차이

sass와 scss는 사실 같은 기술이지만 문법이 조금 다릅니다.

• SASS: 들여쓰기 기반 문법 (세미콜론, 중괄호 없음)
• SCSS: CSS와 거의 동일한 문법 (세미콜론, 중괄호 사용)

일반적으로 React 프로젝트에서는 CSS와 호환성이 좋은 scss 문법을 사용하는 것이 권장됩니다.

---

마무리

React에서 scss를 적용하면 스타일 관리가 단순해지고 유지보수성이 높아집니다.
특히 팀 프로젝트에서는 변수, 믹스인, 모듈화를 통해 생산성을 크게 끌어올릴 수 있습니다.
앞으로 React 프로젝트를 진행한다면 scss와 sass 활용을 적극 추천드립니다.

 

함께 보면 좋은 글

• SCSS 변수 완벽 가이드: 입문자도 쉽게 이해하는 활용 팁
• React 컴포넌트 비교: 함수형 vs 클래스형 차이와 Front-end 개발 선택 기준
• 책상 위 분위기를 바꿔주는 무드등 추천 ✨
• 건강한 생활을 위한 필수템, 블루라이트 차단 안경