[React] React 스타일링 (SCSS, Styled-Components, Tailwind CSS)

---

01

SCSS (SASS의 최신 버전!)

SCSS는 CSS의 확장방식으로, 더 편리하게 적용할 수 있고 강력한 기능을 제공합니다.

가능성 증가, 재용성 강화, 중차구조 가능, 반복문 및 단어를 사용하여 간단하게 작성할 수 있습니다.

✅  파일 확장자:. scss: .scss

1. SCSS 설치 방법

npm install sass

그리고 확장자가. scss인 파일을 생성해서 사용하면 됩니다!
예를 들어 App.scss 파일을 만들고 이렇게 작성할 수 있어요.

 

3. 기본 문법

1) 변수 사용하기

한 번 설정한 변수는 여러 곳에서 재사용할 수 있어서 편합니다!

$main-color: #FF6F3C;

button {
  background-color: $main-color;
  color: white;
}

 

2) 중첩(Nesting) 사용하기

일반 CSS에서는. container. title span 이렇게 길어지는데, SCSS에서는 깔끔하게 중첩할 수 있습니다!

.container {
  background: #f9f9f9;

  .title {
    color: #333;

    span {
      font-weight: bold;
    }
  }
}

 

3) 믹스인(Mixin)으로 코드 재사용하기

믹스인은 재사용 가능한 CSS 코드 블록입니다.
비슷한 스타일을 반복해서 쓰지 않고, 한 번 정의해 놓고 @include로 불러오면 끝!

@mixin button-style($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px;
  border-radius: 5px;
}

button {
  @include button-style(#FF6F3C, white);
}

 

4. SCSS의 장점과 단점

✅ 장점

• 코드 재사용성이 뛰어남
• 유지보수가 편리함
• CSS보다 더 강력한 기능을 제공

❌ 단점

• 일반 CSS보다 학습이 조금 필요함
• 브라우저는 SCSS를 이해하지 못해서 CSS로 변환하는 과정이 필요함

---

02

Styled-Components (CSS-in-JS 대표주자!)

Styled-Components는 JavaScript에서 CSS를 적용할 수 있도록 하는 라이브러리로,

React 컨퍼넌트 내부에서 배우게 정의된 것입니다.

CSS를 편하게 가방 화하고, 독립적인 컨퍼넌트로 구성할 수 있어 React에서 편리하게 사용할 수 있는 것이 특징입니다.

1. Styled-Components 설치 방법

npm install styled-components

 

2. Styled-Components 기본 사용법

import styled from "styled-components";

const Button = styled.button`
  background-color: #FF6F3C;
  color: white;
  padding: 10px;
  border-radius: 5px;
`;

function App() {
  return <Button>오렌지 버튼</Button>;
}

이렇게 하면 <Button>이라는 React 컴포넌트처럼 사용할 수 있습니다!

3. Styled-Components의 꿀팁

1) 기존 컴포넌트에 스타일 추가하기

const SpecialButton = styled(Button)`
  font-size: 18px;
  font-weight: bold;
`;

기존 버튼을 재사용하면서도 새로운 스타일을 추가할 수 있습니다!

 

2) Props로 동적으로 스타일 변경

const Button = styled.button`
  background-color: ${(props) => (props.primary ? "#FF6F3C" : "#5A8FBE")};
  color: white;
`;

<Button primary>Primary 버튼</Button>
<Button>일반 버튼</Button>

Props를 활용해서 스타일을 동적으로 변경할 수도 있습니다!

 

3) 글로벌 스타일 적용하기

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    font-family: 'Arial', sans-serif;
    background: #f9f9f9;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <h1>글로벌 스타일 적용 완료!</h1>
    </>
  );
}

GlobalStyle을 사용하면 전역 스타일도 설정 가능합니다!

4. Styled-Components의 장점과 단점

✅ 장점

• CSS를 컴포넌트 화할 수 있음
• JavaScript와 쉽게 연동 가능
• CSS 클래스명을 따로 고민할 필요 없음

❌ 단점

• CSS보다 초기 학습이 필요함
• JS 파일 크기가 커질 수 있음

---

03

Tailwind CSS (Utility-First CSS)

Tailwind CSS는 반복적인 CSS의 필수 기능을 명령어로 제공하여 하나의 컨퍼넌트에서 반복되는 스타일을 가로 하지 않고 필요한 필드만 적용하는 CSS 프레임워크입니다. 그리고 바로 확인 가능하게 시간을 저지할 수 있는 것이 특징입니다.

1. Tailwind CSS 설치 방법

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

그리고 tailwind.config.js 파일을 수정하고, index.css에 Tailwind를 추가하면 준비 완료!

 

2. 기본 사용법

function App() {
  return <button className="bg-orange-500 text-white px-4 py-2 rounded">버튼</button>;
}

클래스명만 추가하면 스타일이 적용됩니다

 

3. Tailwind CSS의 장점과 단점

✅ 장점

• CSS 파일을 거의 안 건드려도 됨
• 미리 만들어진 클래스를 조합하는 방식이라 빠름
• 반응형 스타일도 클래스명만 추가하면 해결됨 (md:w-1/2 같은 방식)

❌ 단점

• 클래스명이 길어질 수 있음
• 기존 CSS 방식과 달라서 처음엔 어색할 수도 있음

---

04

마무리

스타일링 방식	특징	추천 대상
SCSS	CSS보다 강력한 기능 제공	기존 CSS 확장해서 쓰고 싶은 분
Styled-Components	JS 안에서 CSS 작성, 동적 스타일 가능	React 컴포넌트 스타일링을 선호하는 분
Tailwind CSS	클래스명만으로 스타일링 가능	빠르게 개발하고 싶은 분

✅  추천

• 컴포넌트 스타일링을 쉽게 하고 싶다면? 👉 Styled-Components
• CSS를 재사용하면서 효율적으로 쓰고 싶다면? 👉 SCSS
• 빠른 개발 & 유지보수성을 원한다면? 👉 Tailwind CSS