React에서 SCSS 사용법

 

SCSS(Sassy CSS)는 CSS 전처리기 중 하나로, 보다 효율적으로 스타일을 작성하고 관리할 수 있는 기능을 제공합니다. React 프로젝트에서도 SCSS를 사용하여 스타일링을 한층 더 체계적으로 관리할 수 있습니다. 이 글에서는 React에서 SCSS를 설정하고 사용하는 방법을 단계별로 설명하겠습니다.

---

1. SCSS란 무엇인가요?

SCSS는 Sass(Syntactically Awesome Stylesheets)의 한 문법 형태로, 기존 CSS에 변수, 중첩, 믹스인 등의 기능을 추가하여 더 강력하고 읽기 쉬운 스타일 코드를 작성할 수 있도록 돕습니다.

SCSS의 주요 기능:

• 변수(Variables): 색상, 크기 등을 변수로 정의해 재사용 가능
• 중첩(Nesting): 계층 구조를 직관적으로 표현
• 믹스인(Mixins): 재사용 가능한 스타일 블록
• 함수(Functions): 스타일 로직에 동적인 계산 추가

---

2. SCSS 설정하기

React 프로젝트에서 SCSS를 사용하려면 몇 가지 설정이 필요합니다. 다음은 SCSS 설정 방법입니다.

2-1. 프로젝트 생성

React 프로젝트를 생성합니다. (프로젝트가 이미 있다면 이 단계를 건너뛰세요.)

npx create-react-app my-app
cd my-app

2-2. SCSS 설치

SCSS를 사용하려면 sass 패키지를 설치해야 합니다. Create React App(CRA) 환경에서는 SCSS 컴파일을 자동으로 지원합니다.

npm install sass

2-3. SCSS 파일 생성

프로젝트 구조에 맞게 .scss 파일을 생성합니다. 예를 들어, src/styles 디렉터리를 만들어 스타일 파일을 관리할 수 있습니다.

디렉터리 구조 예시:

src/
  styles/
    _variables.scss
    main.scss
  components/
    App.js

---

3. SCSS 사용하기

3-1. 기본 사용법

.scss 파일을 React 컴포넌트에서 임포트하여 사용할 수 있습니다.

예시:

/* src/styles/main.scss */
$primary-color: #3498db;

body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;
}

button {
  background-color: $primary-color;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
}

// src/components/App.js
import React from "react";
import "../styles/main.scss";

function App() {
  return (
    <div>
      <h1>Hello, SCSS!</h1>
      <button>Click Me</button>
    </div>
  );
}

export default App;

3-2. 변수 사용하기

SCSS 변수는 프로젝트 전반에서 일관된 스타일을 유지하는 데 유용합니다.

예시:

/* src/styles/_variables.scss */
$font-stack: Helvetica, sans-serif;
$primary-color: #ff6347;

/* src/styles/main.scss */
@import "variables";

body {
  font-family: $font-stack;
  color: $primary-color;
}

3-3. 중첩(Nesting)

SCSS의 중첩 기능을 사용하면 계층 구조를 명확하게 표현할 수 있습니다.

예시:

nav {
  ul {
    list-style: none;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 15px;

      a {
        text-decoration: none;
        color: $primary-color;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

3-4. 믹스인(Mixins)

믹스인을 사용하여 반복되는 스타일 블록을 재사용할 수 있습니다.

예시:

/* src/styles/_mixins.scss */
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* src/styles/main.scss */
@import "mixins";

.container {
  @include flex-center;
  height: 100vh;
  background-color: $primary-color;
}

// src/components/App.js
function App() {
  return <div className="container">Centered Content</div>;
}

---

4. 주의 사항

1. SCSS 파일 크기 관리: 스타일이 많아질 경우 파일을 모듈화하여 관리하세요.
2. SCSS 모듈 사용: 클래스 이름 충돌을 방지하려면 CSS 모듈(.module.scss)을 사용하는 것이 좋습니다.

SCSS 모듈 예시:

/* src/components/App.module.scss */
.container {
  text-align: center;
  color: blue;
}

import styles from "./App.module.scss";

function App() {
  return <div className={styles.container}>Hello, SCSS Module!</div>;
}

---

5. 결론

SCSS는 React 프로젝트에서 강력한 스타일링 도구로 활용할 수 있습니다. SCSS의 변수, 중첩, 믹스인, 그리고 모듈화를 적절히 사용하면 유지보수성과 일관성을 갖춘 스타일링이 가능합니다. 이제 React와 SCSS를 결합하여 더욱 세련된 웹 애플리케이션을 만들어 보세요!

React에서 이벤트 객체 사용하기