Post

SCSS) 리액트에서 SCSS 적용하는 방법

Posted Updated
Preview Image
By parksohyunnn 6 min read

리액트에서 SCSS 적용하는 방법

리액트(React)는 컴포넌트 기반의 UI 라이브러리로, 복잡한 사용자 인터페이스를 효율적으로 구축할 수 있습니다. SCSS(Sass)는 CSS의 상위 문법으로, 스타일링을 더 강력하고 유연하게 해줍니다. 이번 글에서는 리액트에서 SCSS를 적용하는 방법과 그 장점을 다루겠습니다. 또한 기본 HTML과 리액트의 HTML(JSX) 차이점, 적용 방법, 기본값 및 단축키 등에 대해 설명합니다.

기본 HTML과 리액트의 HTML(JSX) 차이점

기본 HTML

기본 HTML은 정적 웹 페이지를 만드는 데 사용되며, 다음과 같은 구조를 가집니다:

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="root"></div>
    <script src="index.js"></script>
</body>
</html>

리액트의 HTML(JSX)

리액트에서는 JSX를 사용하여 컴포넌트를 정의합니다. JSX는 JavaScript를 확장한 문법으로, HTML과 유사하지만 몇 가지 차이점이 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './styles.scss';

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

ReactDOM.render(<App />, document.getElementById('root'));

주요 차이점

1.클래스 이름: HTML에서는 class 속성을 사용하지만, JSX에서는 className을 사용합니다. 2.자체 닫는 태그: JSX에서는 자체 닫는 태그를 사용해야 합니다. 예를 들어, <img />, <input /> 등. 3.JavaScript 표현식: JSX 내부에서 중괄호 {}를 사용하여 JavaScript 표현식을 사용할 수 있습니다.

리액트 프로젝트에서 SCSS 적용 방법

1. 프로젝트 생성

리액트 프로젝트를 생성하려면 create-react-app 명령어를 사용합니다.

1
2

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

2. SCSS 설치

프로젝트에서 SCSS를 사용하려면 node-sass 패키지를 설치해야 합니다.

1

npm install node-sass

3. SCSS 파일 생성 및 적용

src 디렉토리 안에 styles.scss 파일을 생성합니다.

1
2
3
4
5
6
7
8
9

/* styles.scss */
$app-color: #3498db;

.app {
    background-color: $app-color;
    color: white;
    text-align: center;
    padding: 20px;
}

그리고 App.js 파일에서 이 SCSS 파일을 임포트합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

// App.js
import React from 'react';
import './styles.scss';

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

export default App;

4. SCSS 모듈 사용 (선택사항)

리액트에서는 SCSS 모듈을 사용하여 CSS 범위를 컴포넌트 단위로 제한할 수 있습니다. 이를 통해 스타일 충돌을 방지할 수 있습니다.

1
2
3
4
5
6
7

/* App.module.scss */
.app {
    background-color: #3498db;
    color: white;
    text-align: center;
    padding: 20px;
}

App.js에서 SCSS 모듈을 임포트하고 사용합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

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

function App() {
    return (
        <div className={styles.app}>
            <h1>Hello, React with SCSS Modules!</h1>
        </div>
    );
}

export default App;

기본값 및 단축키

VSCode 설정

리액트와 SCSS 개발을 위한 몇 가지 유용한 VSCode 확장 프로그램과 설정을 소개합니다.

  1. ESLint: 코드 품질을 유지하기 위해 ESLint를 설정합니다.
  2. Prettier: 코드 포맷팅을 자동화하여 일관성을 유지합니다.
  3. Sass: SCSS 파일을 위한 문법 강조와 자동 완성 기능을 제공합니다.

추천 VSCode 확장 프로그램

  • ESLint
  • Prettier - Code formatter
  • Live Server
  • Sass

유용한 단축키

  • 코드 포맷팅: Shift + Alt + F
  • 자동 완성: Ctrl + Space
  • 코드 주석 처리: Ctrl + /

결론

리액트에서 SCSS를 적용하는 것은 비교적 간단하며, 스타일링을 더 강력하게 만들어줍니다. SCSS의 변수, 중첩, 모듈화 기능을 통해 유지보수성과 재사용성을 높일 수 있습니다. 기본 HTML과 JSX의 차이를 이해하고, SCSS를 설치 및 적용하는 과정을 익히면 리액트 프로젝트의 스타일링을 보다 효율적으로 관리할 수 있습니다. 다양한 도구와 설정을 활용하여 개발 생산성을 높여보세요.

리액트와 SCSS의 조합으로 더욱 세련되고 일관된 사용자 인터페이스를 만들어보시기 바랍니다.

SCSS
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github