리액트에서 SCSS 사용하기 내가 해냄

인트로

오늘은 리액트에서 SCSS 사용하는 방법에 대해 알아보려고 합니다. SCSS를 알고만 있고 사용하지 않았는데 CSS 코드가 길어질 때마다 파일 보는 게 너무 괴롭더라고요.. 이참에 SCSS에 익숙해지려고 합니다. 일단 오늘은 리액트에서 SCSS 사용하려면 어떻게 해야하는 지만 알아보겠습니다.

---

Sass

Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor 즉 css 전처리기입니다.

가독성이 높고 코드 재사용에 유리한 CSS를 생성할 수 있습니다.

변수, 조건문과 반복문 등 추가기능을 사용할 수 있습니다. 더 자세한 내용은 문법 포스팅에서 알아보도록 하죠.

어쨌든 순수 CSS보다 지원하는 기능도 많고 짧은 코드로 원하는 스타일을 적용할 수 있습니다.

SASS / SCSS?

Sass에는 SASS 표기법(.sass), SCSS 표기법(.scss)가 있습니다.

SCSS가 순수 CSS 사용하는 방법과 더 비슷합니다. (중괄호 사용, 세미콜론 사용 등등)

저는 SCSS 표기법을 사용할 예정입니다. 

Install

아주 간단합니다. 리액트 앱을 만들고 해당 폴더로 이동한 다음 명령어를 입력합니다.

npm install node-sass

그러면 아래와 같이 package.json에 node-sass가 생깁니다.

적용방법

사용하던 CSS 파일이 있다면 확장자를 .css -> .scss 로 변경해 줍니다. 

해당 css를 적용할 컴포넌트에 import를 해줍니다.

import "./App.scss";

App.scss

$blue: #228be6;
$activeblue: #145690;

.buttons {
  margin: 10%;
  width: 100px;
  height: 100px;
  color: white;
  background: $blue;

  &:hover {
    color: black;
  }

  &:active {
    background: $activeblue;
  }
}

App.js

import React from "react";
import "./App.scss";

function App() {
  return (
    <>
      <button className="buttons">BUTTON</button>
    </>
  );
}

export default App;

아주 간단하게 적용된 모습.. so cool..

module.scss

CSS Module도 마찬가지입니다. 그전에 CSS Module에 대해 간단하게 이야기해 봅시다.

CSS Module을 사용하면 CSS 클래스가 중첩되는 걸 막을 수 있습니다. 

해당 컴포넌트에 적용한 css 파일의 확장자를 .module.css 로 바꾸면 끝입니다. App 컴포넌트에 적용할 거라면 App.module.css 이런 식으로 파일을 만들면 되는 거죠.

해당 컴포넌트 내에서만 스타일을 적용하기 때문에 이 기능을 사용하면 CSS 클래스 이름이 다른 곳에서 겹치는 걱정을 할 필요가 없습니다.

 

사용할 때는 다음과 같이 import로 불러온 styles 객체 안에 있는 값을 참조하여 className을 설정할 수 있습니다.

import React from "react";
import styles from "./App.module.css";

function App() {
  return (
    <>
      <button className={styles.buttons}>BUTTON</button>
    </>
  );
}

export default App;

scss를 적용해서 사용하고 싶다면?

.module.css -> .module.scss로 바꿔주면 됩니다.

 

스타일 코드 변경 없이 확장자만 변경하였습니다.

App.js에서 다음과 같이 import 하여 사용하면 됩니다.

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

function App() {
  return (
    <>
      <button className={styles.buttons}>BUTTON</button>
    </>
  );
}

export default App;

잘 적용되었네요. 똑같다!

---

앞으로 좀 더 편한 삶을 살 수 있을 것 같습니다.. scss 감사하다.