[React] React CSS 방법을 선택해보자! - Styled-Components

---

 

iOS에 이어 리액트에도 발을 들이게 되었는데요 !! 

캡스톤에서 iOS 대신 리액트를 써 개발을 해보려구 해요. 🥹 ( 도전 ~ )

아직까진 간단한 컴포넌트 만드는 정도만 할 줄 알아요. . . ㅋㅋ

 

오늘은 CSS 방법 중 하나인 Styled-Components에 대해 포스팅 해보려구 합니다.

---

 

■ Styled-Components란 ?

■ Styled-Components 선택 이유

■ 반응형 스타일 적용하는 방법

---

■ Styled-Components란 ?

CSS-in-JS 방식의 스타일링 라이브러리로, JavaScript 코드 내에서 직접 CSS를 작성할 수 있습니다.

 

✔️ CSS-in-JS 방식

• CSS 코드를 별도의 .css 파일에 작성하지 않고, JavaScript 코드 내에서 직접 작성할 수 있음
• 컴포넌트별로 스타일을 캡슐화하여 관리 가능

✔️ 컴포넌트 기반 스타일링

• 스타일이 해당 컴포넌트에 국한되어 적용되므로 전역 스타일 충돌 방지
• 재사용이 용이하고, 유지보수가 쉬움

✔️ 동적 스타일링 가능

• props를 활용하여 동적으로 스타일을 변경 가능
• theme을 적용하여 전체적인 스타일 관리 가능

✔️ 반응형 스타일 쉽게 적용

• @media 쿼리를 활용하여 반응형 스타일을 간편하게 적용 가능

👉 작은 프로젝트에서는 성능 차이가 크지 않지만, 대규모 프로젝트에서는 성능 최적화를 반드시 고려해야 함!
👉 기본적인 스타일(예: Layout, Reset)은 CSS 파일로 관리하고, 변경이 필요한 부분에만 styled-components를 사용하면 최적의 성능을 유지할 수 있음! 

---

■ 왜 많고 많은 방법 중 Styled-Components를 선택했나 ?!

전 SwiftUI가 익숙하기 때문입니다 ..  😵

 

SwiftUI에선 컴포넌트에 바로 스타일을 적용하는 방식을 사용합니다.

 

이걸 선언형 UI(Declarative UI)라고 하는데,

.font(), .foregroundColor(), .padding() 같은 모디파이어(Modifier) 를 체인처럼 연결해서 뷰의 스타일을 선언하는 방식입니다.

 

예시 코드를 보여드리자면,

Text("안녕하세요. SwiftUI~ ")
	.frame(width: 100)
	.foregroundColor(Color.red)
    	.padding(10)
        
Text("SwiftUI는 처음이시죠?")
	.frame(width: 100)
	.foregroundColor(Color.red)
    	.padding(10)

---

 

보통 CSS는 HTML과 분리되어 .css 파일로 관리하잖아요.

전 그 방식이 손에 잘 안 익더라구요.

 

클래스, 아이디 이름을 짓는 것도,

HTML, css 파일 왔다 갔다 하며 작업하는 것도 번거로웠구요. 

( + 중복될까봐 걱정됨, 나중에 수정하려고 해도 뭐였는지 기억이 안 나서 잘 못 찾음 .. 😢  )

 

그래서 선언형 UI(Declarative UI)와 가장 유사한 CSS 방식인

 'styled-components' 를 선택하게 되었습니다.

 

간단한 예시 코드 보여드릴게요 !

import React from "react";
import styled from "styled-components";

// Styled Component 정의
const StyledText = styled.p`
  width: 100px;
  color: red;
  padding: 10px;
`;

function App() {
  return (
    <div>
      <StyledText>안녕하세요.</StyledText>
      <StyledText>React는 처음이에요.</StyledText>
    </div>
  );
}

export default App;

 

+ 추가로, 인라인 스타일도 선언형UI와 비슷했는데요.

인라인 스타일은 재사용이 안되고, Styled-Components는 재사용성 가능해 선택하였습니다 !

 

( 다른 CSS 방식과 비교할 수 있게 표로 정리해두었습니다 ~ )

스타일 적용 방식	특징
인라인 스타일	컴포넌트 내부에서 스타일 직접 지정
CSS 파일 (Traditional CSS)	.css 파일을 분리해서 사용
CSS Modules	모듈화를 통해 클래스명을 고유하게 적용
✨ Styled-Components (CSS-in-JS)	스타일을 JS 코드 내부에서 선언적으로 적용
Tailwind CSS	클래스명을 조합하여 스타일을 적용

---

■ 반응형 스타일 적용하는 방법

미디어 쿼리를 변수로 관리하여 스타일 적용하는 방법이에요!

 

자세한 설명과 사용방법은 다른 포스팅에서 다루도록 하겠습니다

const sizes = {
  mobile: "480px",
  tablet: "768px",
  desktop: "1024px"
};

const device = {
  mobile: `(max-width: ${sizes.mobile})`,
  tablet: `(max-width: ${sizes.tablet})`,
  desktop: `(max-width: ${sizes.desktop})`
};

const Title = styled.h1`
  font-size: 2rem;
  color: black;

  @media ${device.tablet} {
    font-size: 1.5rem;
    color: blue;
  }

  @media ${device.mobile} {
    font-size: 1.2rem;
    color: red;
  }
`;

const App = () => {
  return <Title>반응형 텍스트</Title>;
};

export default App;

---