리액트 + SCSS 꼭 알아야 할 개념 정리
1. SCSS란?
- Sass의 확장 문법 (SASS 3버전에서 등장한 최신버전)
- 기존 CSS보다 더 효율적으로 스타일을 작성할 수 있게 해주는 CSS 전처리기
- .scss 확장자를 사용
- 변수, 중첩, 믹스인, 함수 등 다양한 기능 제공
2. 리액트 프로젝트에 SCSS 적용 방법
- sass 패키지 설치
npm install sass
- SCSS 파일 생성: App.scss
- 컴포넌트에서 가져오기
import './App.scss';
3. SCSS 주요 문법
개념 설명 예시
| 변수 | 반복되는 값 관리 | $primary-color: #333; |
| 중첩 | 계층적인 구조 표현 | nav { ul { li { } } } |
| 믹스인 | 코드 재사용 가능 | @mixin flex-center { display: flex; justify-content: center; } |
| 확장 | 스타일 상속 | @extend .btn |
| 함수 | 계산 또는 동적 값 처리 가능 | lighten($color, 20%) |
리액트 + SCSS 꿀 기능
❶변수 ($)
공통된 부분을 변수로 만들어두고, 사용
가독성도 좋아지고, 재 사용성도 좋아진다.
❷중첩 (중요 ! 중요! )
정말 편한 기능이 맞는 것 같다.
가독성도 좋아지고, html 구조 파악도 용이하다.
❸ 믹스인 (@mixin, @include)
실무에서 자주 쓰이는 SCSS + React 개념
1. 컴포넌트 단위 SCSS 파일 관리
컴포넌트마다 별도의 SCSS 파일을 만들어 관리
📁 예:
components/
└─ Button/
├─ Button.jsx
├─ Button.scss
2. SCSS 모듈화 (CSS Module)
클래스명이 충돌하지 않게 하기 위해 SCSS Module 사용
파일명: Button.module.scss
사용:
import styles from './Button.module.scss';
function Button() {
return <button className={styles.btn}>버튼</button>;
}
3. 전역 스타일 관리 (Global SCSS)
- src/styles/_variables.scss, _mixin.scss 같은 파일을 만들어 공통 관리
- @use 또는 @import로 가져오기
@use 'styles/variables';
4. SCSS 변수와 믹스인 활용
- 컬러, 폰트사이즈, 반응형 브레이크포인트를 변수로 선언
- 자주 쓰이는 스타일 묶음은 믹스인으로 재사용
실무 꿀팁
팁 1: SCSS 변수를 테마처럼 활용하기
컬러 팔레트, 폰트 크기, 간격을 변수로 정리해두면 유지보수가 훨씬 쉬워져요.
$primary-color: #3498db;
$font-size-lg: 18px;
팁 2: 공통 믹스인 파일 만들어두기 반복되는 스타일은 믹스인으로 정리하면 생산성이 급상승!
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
팁 3: SCSS 모듈화를 적극 활용 클래스명 충돌을 막고, 유지보수성을 높이려면 CSS Module 방식을 쓰는 게 좋아요.
팁 4: 전역 SCSS 따로 관리 공통 스타일과 변수를 한 곳에 모아두고 index.scss에서 한 번에 불러와 사용하는 것이 효율적!
팁 5: 반응형을 SCSS 변수로 정리 미디어 쿼리를 변수로 관리하면 유지보수가 쉬워져요.
$tablet: 768px;
@media (max-width: $tablet) {
// 스타일
}
정리
구분 핵심 개념
| SCSS 설치 및 연결 | npm install sass, import 사용 |
| SCSS 주요 문법 | 변수, 중첩, 믹스인, 확장, 함수 |
| SCSS 모듈화 | .module.scss 파일과 import styles from |
| 공통 파일 관리 | _variables.scss, _mixin.scss |
| 실무 팁 | 전역 변수, 믹스인, CSS 모듈화, 반응형 변수화 |
변수와 믹스인 차이 ?
- SCSS 변수 ($)
→ 정의
$primary-color: #ff6347;
$padding-large: 20px;
값(색상, 크기 등)을 저장해두고, 여러 곳에서 재사용하는 거야
→ 사용 예시
.button {
background-color: $primary-color;
padding: $padding-large;
}
✓ 특징
❶그냥 값을 저장하는 거야.
❷스타일을 반복해서 쓸 때 편해.
- SCSS 믹스인 (@mixin)
→정의
@mixin button-style($bg-color, $padding) {
background-color: $bg-color;
padding: $padding;
border-radius: 8px;
color: #fff;
}
스타일 블록을 정의해두고, 나중에 호출해서 적용하는 거야
→ 사용 예시
.button-primary {
@include button-style($primary-color, 20px);
}
.button-secondary {
@include button-style(#ccc, 15px);
}
✓ 특징
❶스타일 덩어리(코드 묶음)**를 재사용할 때 좋아.
❷파라미터(인자)**를 넣어서 상황에 따라 다르게 적용 가능.
둘의 차이 한 줄 요약
- 변수: 값을 저장
- 믹스인: 스타일 블록(코드 묶음)을 재사용
뭔가 변수는 짧막한 저장용 이라면
믹스인은 스타일링 컴포넌트 또는 함수 같은 느낌이 ! ! 들어 !
와 — 진짜 감 좋은데! 거의 맞았어.
조금만 더 정리해주면 이렇게 설명할 수 있을 것 같아.
변수랑 믹스인의 느낌을 비유해보면
| SCSS 변수 | SCSS 믹스인 |
| 짧고 간단한 값 (숫자, 색상, 크기 등) | 여러 줄의 스타일 묶음 |
| 컴포넌트의 props 값 같은 느낌 | 컴포넌트 함수 같은 느낌 |
예를 들어서
아래는 변수
const buttonColor = "tomato"; // 변수 (짧고 단순 값)
function ButtonStyle(bgColor, padding) {
return (
{
backgroundColor: bgColor,
padding: padding,
borderRadius: "8px"
}
);
}
이 함수는 스타일 덩어리(= 믹스인) 같은 거지.
결론
- 변수: 짧고 단순한 값 저장용
- 믹스인: 스타일을 컴포넌트처럼 재사용할 수 있는 묶음
네가 말한 것처럼 믹스인이 컴포넌트 느낌 나 함수 느낌 맞아 !
특히 파라미터까지 받을 수 있으니까 더더욱 그래.
mixin은 기본 공통 스타일 틀을 잡아두고,
상황마다 달라질 부분만 인자로 넘겨서 그 값만 바꿔주는 것이다.
믹스인에서 인자의 순서 중요하지 ?!
응!! 정확해 — 믹스인은 정의할 때 정한 인자 순서대로 써야 해.
딱 함수 쓸 때랑 똑같다고 보면 돼.
예를 들어서 ▾
💬 믹스인 정의
@mixin button-style($bg-color, $padding, $radius) {
background-color: $bg-color;
padding: $padding;
border-radius: $radius;
}
💬 믹스인 사용할 때
순서 꼭 지켜야 함
.button-primary {
@include button-style(tomato, 20px, 8px);
}
.button-secondary {
@include button-style(#333, 15px, 4px);
}
🧚♀️ 그런데! 기본값을 줄 수도 있어
믹스인 정의할 때 이렇게 👇
@mixin button-style($bg-color, $padding: 16px, $radius: 4px) {
background-color: $bg-color;
padding: $padding;
border-radius: $radius;
}
그럼 쓸 때
.button-primary {
@include button-style(tomato); // padding 16px, radius 4px 자동 적용
}
🫶🏻Sass mixin 인자에 초기값을 주면 좋은 이유
Sass에서는 mixin 호출할 때 인자를 전달하지 않으면, 초기값이 없는 인자는 에러가 나요.
초기값을 지정해주면, 인자를 안 넘겼을 때도 기본값을 사용할 수 있어서 훨씬 유연해져요.
✓ 왜 필요한데?
- 코드 재사용성을 높이기 위해
→ 매번 값을 다 넣을 필요 없이, 자주 쓰는 기본값을 설정해두고
필요할 때만 바꿔서 쓸 수 있어요. - 에러 방지용
→ 인자를 안 넣었는데 초기값이 없으면 Sass가 빌드할 때 에러남
→ 근데 초기값이 있으면 그냥 그 값으로 처리 가능
✎예제
@mixin button-style($bg-color: #3498db, $text-color: #fff) {
background-color: $bg-color;
color: $text-color;
padding: 10px 20px;
border-radius: 5px;
}
사용 1 — 기본값 사용
.button {
@include button-style;
}
사용 2 — 값 덮어쓰기
.button-danger {
@include button-style(#e74c3c, #fff);
}
이렇게 하면
- 기본 버튼은 파란색
- danger 버튼은 빨간색
같이 쉽게 조절 가능하죠.
✎ 만약 초기값 없으면?
@mixin button-style($bg-color, $text-color) {
background-color: $bg-color;
color: $text-color;
}
이걸
.button {
@include button-style;
}
이렇게 쓰면 에러 발생
→ Missing argument for $bg-color
🐰정리
초기값은 선택적 유연성 + 에러 방지
특히 리액트 SCSS에서 다양한 컴포넌트 스타일을 재사용할 때
믹스인 기본값은 코드 깔끔하게 유지하는 핵심 도구
혹은 SCSS 최신 버전에서는 named arguments 도 가능하긴 한데, 이건 잘 안 쓰이는 편이긴 해.
@include button-style($radius: 10px, $padding: 20px, $bg-color: tomato);
근데 이렇게 쓸 거면 그냥 기본값이나 믹스인 나누는 게 더 깔끔해.
혹시 믹스인 인자 순서가 헷갈리거나 복잡해진다면,→ 인자 개수를 줄이거나 → 기본값 설정
해두는 것도 좋은 방법이야.
🤍 순서가 헷갈린다면 이렇게! 🤍
“바뀔 가능성 있는 거를 인자로 쓴다”
“절대 안 바뀔 거면 mixin 안에 고정값으로 둔다”
그리고 인자 자리에 다 쭉 나열하는 거지.
다만 순서는 자주 바꿀 것 같은 거 → 덜 바꿀 것 같은 거 순서로 두면 좋아.
(꼭 그럴 필요는 없지만 유지보수나 가독성에 좋아)
나 혼자 갑자기 궁금해진 것. .
예를 들어,
@mixin box-style($padding: 20px) {
padding: $padding;
border: 1px solid #ddd;
border-radius: 5px;
}이런 코드 안에서, 애초에
이 코드의 {} 중괄호 안인, border: 1px solid #ddd; border-radius: 5px 이것도 그냥 거의 기본값이 아닌가 ?
라는 의문..
와 진짜 날카로운 질문이다 이거 — 완전 좋은 시점에서 짚었어 👏
개념 확실하게 딱 정리해볼게요.
인자 기본값 vs mixin 안의 고정 스타일 차이
둘 다 기본값처럼 보이긴 하는데 사실 역할이 완전히 달라요.
| 구분 | 인자 기본값 | mixin 안의 고정 스타일 |
| 목적 | 상황마다 바뀌는 값에 기본값 설정 | 모든 상황에서 고정으로 쓰려는 스타일 |
| 변경 가능성 | @include할 때 인자로 전달해 바꿀 수 있음 | @include할 때 절대 못 바꿈 |
| 설정 위치 | 괄호 안 인자 선언부 | 중괄호 {} 안 스타일 선언부 |
예를 들어,
🐰인자 기본값: 상황마다 바뀔 수 있음
@mixin box-style($padding: 20px) {
padding: $padding;
}
사용
.box1 {
@include box-style(30px); // padding 30px
}
.box2 {
@include box-style; // padding 20px (기본값)
}
→ @include 할 때마다 다르게 쓸 수 있음.
🐿️ mixin 안의 고정 스타일: 무조건 고정
@mixin box-style($padding: 20px) {
padding: $padding;
border: 1px solid #ddd;
border-radius: 5px;
}
사용
.box {
@include box-style(30px);
}
여기선
- padding은 30px
- border, border-radius는 무조건 1px solid #ddd / 5px
→ 바꾸고 싶으면 mixin 자체를 수정하거나, 새로운 mixin을 만들어야 함
혹은 인자를 추가해서 또 바꿔줘야 함.
→ 그러니까…
지금 {} 안에 있는
border: 1px solid #ddd;
border-radius: 5px;
는 ‘기본값’이라기보단
디자인 시스템의 고정값, 공통 스타일에 가까워요.
기본값이라는 건
인자로 받아서 상황마다 바꿀 수 있는데, 안 주면 기본으로 적용되는 값
이걸 말하는 거고!
🧚♀️🐰 결론
지금 {} 안의 값들은
✔️ 절대 바뀌지 않는 고정값 (디자인 시스템 스타일)
✔️ 바꾸고 싶다면 인자로 빼서 기본값을 설정해주면 됨!
인자 기본값이란?
"이 인자가 안 들어왔을 때를 대비해서 미리 지정해둔 값"
즉, 바뀔 가능성이 있는 값인데
혹시라도 사용자가 안 넘겨줄 수도 있으니까
그때 적용될 기본값을 설정해두는 것이에요.
=>
인자 기본값은, 바뀔 수 있는 파트지만, 혹시 인자가 설정되지 않을 경우에 대비해서 적어두는 값 이라고 이해 하면 쉽다 !
인자 순서 헷갈리는 부분! 안쓰고 싶은 중간 순서의 인자 부분은 어떻게 ?
예를 들어, 아래 코드에서는
@mixin button($bg-color: blue, $font-size: 16px, $padding: 10px) {
background-color: $bg-color;
font-size: $font-size;
padding: $padding;
}@include button(black, 18px);
이렇게 하면:
- $bg-color = black
- $font-size = 18px
- $padding = 10px (기본값 사용)
이 상황에서 18px은 **폰트 사이즈(font-size)**에 해당
만약 폰트 사이즈를 안 쓰고 패딩만 바꾸고 싶을 때는 이렇게 할 수 있어요:
@include button(black, 0 , 20px); // 폰트 사이즈를 안 넘기고 패딩만 20px로 설정🫶🏻설명:
- 첫 번째 인자 black은 여전히 배경색($bg-color)에 들어가고,
- 두 번째 인자는 빈 칸으로 두면 기본값인 16px이 폰트 사이즈($font-size)로 사용돼요.
- 기본 값이 있으면 비워둬도 되고, black, , 20px ! 기본 값 없으면 0 적기
- 세 번째 인자 20px은 패딩($padding)에 들어갑니다.
✔️ 중요한 점
빈 칸을 **, ,**처럼 두는 건
인자 자리를 비워두는 방법인데, 그 자리에 해당하는 기본값이 적용된다.
출처 : 챗지피티, 오즈코딩스쿨학습자료, 구글링
'Studying > React' 카테고리의 다른 글
| 리액트 공부하기 - 스타일링 파트 2. Styled Components (0) | 2025.04.16 |
|---|---|
| 리액트 공부하기 - new Date, 시간/날짜 관련 메서드 (0) | 2025.04.15 |
| 리액트 공부하기 - setInterval (0) | 2025.04.15 |
| 리액트 공부하기 - Custom Hooks. 내가 직접 정의 하는 나만의 훅! (0) | 2025.04.11 |
| 리액트 공부하기 - 자주 쓰이는 다양한 내장 훅(hook)들 : useRef, useMemo, useCallback 등 (1) | 2025.04.11 |