리액트 애플리케이션을 개발할 때 스타일링은 매우 중요한 부분입니다. SASS(SCSS)는 CSS의 확장 버전으로, 기능적으로 CSS와 호환되면서도 변수, 중첩 규칙, mixin 등의 기능을 제공하여 코드의 재사용성과 가독성을 높일 수 있습니다. 이번 포스트에서는 리액트 애플리케이션에서 SASS(SCSS)를 사용하는 방법에 대해 알아보겠습니다.

1. 프로젝트에 node-sass 추가

먼저, 프로젝트에 SASS(SCSS)를 사용하기 위해서는 node-sass 패키지를 설치해야 합니다. 프로젝트 디렉토리에서 아래 명령을 실행하여 node-sass를 설치합니다.

npm install node-sass

2. 파일 확장자 변경

SASS 파일을 사용하기 위해서는 확장자를 .scss로 바꿔야 합니다. 예를 들어, styles.css 파일을 styles.scss로 변경해야 합니다.

3. SASS 파일 작성

SASS 파일을 작성할 때는 기존의 CSS 문법과 함께 SASS의 기능들을 활용할 수 있습니다.

변수 사용 예시

// styles.scss
$primary-color: #007bff;

.button {
  background-color: $primary-color;
}

중첩 규칙 사용 예시

// styles.scss
.card {
  padding: 20px;
  &-title {
    font-size: 1.5rem;
  }
}

Mixin 사용 예시

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

.container {
  @include flexCenter;
}

4. 리액트 컴포넌트에서 SASS 파일 import

마지막으로, SASS 파일을 리액트 컴포넌트에서 사용하기 위해 해당 파일을 import 해야 합니다. 예를 들어, App.js 파일에서 styles.scss를 import 하려면 아래와 같이 작성합니다.

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

위와 같이 진행하면 리액트 애플리케이션에서 SASS(SCSS)를 사용할 수 있게 됩니다.

리액트에서 SASS(SCSS)를 사용하는 방법에 대해 간단히 알아보았습니다. 이를 통해 코드의 가독성을 높이고 스타일을 보다 효율적으로 관리할 수 있게 될 것입니다.

참고 자료: Create React App - Adding a CSS Preprocessor (Sass, Less etc.)