React | Styled Component

Styled-Components

React와 같은 JavaScript 프레임워크에서 CSS를 직접 JavaScript 코드 안에 작성할 수 있게 해주는 CSS-in-JS 라이브러리

이를 통해 컴포넌트별로 스타일을 관리하고, JavaScript의 모든 기능을 활용해 동적 스타일링이 가능

장점

• 컴포넌트 기반: 각 컴포넌트마다 스타일을 독립적으로 작성할 수 있어 유지보수가 쉬움
• 동적 스타일링: props를 통해 조건부 스타일링이 가능하여 유연한 디자인 구현이 가능
• 전역 클래스 이름 충돌 방지: 자동으로 고유한 클래스 이름을 생성해주어 스타일 충돌을 피할 수 있음

단점

• 런타임 성능 이슈: 스타일이 런타임에 적용되기 때문에 대규모 애플리케이션에서는 성능 이슈가 발생할 수 있음
• 빌드 사이즈 증가: 모든 스타일이 JavaScript 코드로 컴파일되기 때문에 빌드 사이즈가 커질 수 있음

 

CSS-in-JS

JavaScript 파일 내에서 CSS를 작성하는 방식

전통적인 CSS 파일에서 스타일을 관리하는 대신, 컴포넌트와 스타일을 함께 관리할 수 있어 유지보수성과 가독성이 좋아짐

Styled-Components, Emotion 등이 대표적인 CSS-in-JS 라이브러리로 사용됨

.

CDD (Component-Driven Development, 컴포넌트 주도 개발)

UI를 작은 컴포넌트 단위로 나누어 개발하는 방식

각 컴포넌트를 독립적으로 만들고 조합하여 전체 UI를 구성하는 방법으로, 재사용성이 높고, 테스트 및 유지보수가 용이

CDD는 특히 React와 같은 컴포넌트 기반 프레임워크에서 많이 사용됨

 

---

Styled-Component 사용법

Styled-Components 기본 사용법

- npm을 통한 패키지 설치

npm install styled-components

설치후에 import하여 사용가능

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: darkblue;
  }
`;

function App() {
  return (
    <div>
      <Button>클릭하세요</Button>
    </div>
  );
}

export default App;

Button이라는 Styled-Component를 생성하고, 스타일을 작성하여 버튼을 렌더링

 

생성한 컴포넌트 재사용하기

Styled-Components는 컴포넌트를 재사용하기 쉽게 만들어준다

동일한 스타일의 버튼을 여러 곳에서 사용할 수 있으며, 추가적인 스타일을 확장하여 사용할 수도 있음

const LargeButton = styled(Button)`
  font-size: 20px;
  padding: 15px 30px;
`;

function App() {
  return (
    <div>
      <Button>작은 버튼</Button>
      <LargeButton>큰 버튼</LargeButton>
    </div>
  );
}

LargeButton은 기존 Button 스타일을 상속받아 추가적인 스타일을 적용하여 재사용 됨

 

클래스명을 지정하지 않아도 되는 이유

Styled-Components는 자동으로 고유한 클래스 이름을 생성해줌

이 과정은 해시값을 기반으로 이루어지며, 각 스타일 컴포넌트마다 고유한 이름이 생성되어 CSS의 전역 충돌을 피할 수 있다

따라서 개발자가 직접 클래스명을 지정할 필요 없이, 스타일을 쉽게 관리할 수 있음!

 

---

Styled-Component 활용 예제

Props 사용

Styled-Components에서는 props를 사용하여 컴포넌트의 스타일을 동적으로 변경할 수 있다

예를 들어, 배경색을 사용자가 조절할 수 있도록 props로 받아서 설정할 수 있음

import { useState } from 'react';
import styled from "styled-components";

const Container = styled.div`
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: rgba(
    ${(props) => props.input1},
    ${(props) => props.input2},
    ${(props) => props.input3},
    ${(props) => props.input4}
  );
`;

function App() {
  const [input1, setInput1] = useState(0);
  const [input2, setInput2] = useState(0);
  const [input3, setInput3] = useState(0);
  const [input4, setInput4] = useState(0);

  return (
    <Container input1={input1} input2={input2} input3={input3} input4={input4}>
      <input type="range" value={input1} onChange={(e) => setInput1(e.target.value)} min={0} max={255} />
      <input type="range" value={input2} onChange={(e) => setInput2(e.target.value)} min={0} max={255} />
      <input type="range" value={input3} onChange={(e) => setInput3(e.target.value)} min={0} max={255} />
      <input type="range" value={input4} onChange={(e) => setInput4(e.target.value)} min={0} step={0.1} max={1} />
    </Container>
  );
}

export default App;

Container컴포넌트가 input1, input2, input3, input4 Props를 받아서 rgba() 형식의 배경색을 동적으로 설정함

슬라이더를 통해 색상을 조절할 수 있으며, 이를 통해 사용자가 원하는 스타일을 실시간으로 반영할 수 있다

 

GlobalStyle 전역 스타일 설정

Styled-Components에서는 createGlobalStyle 을 사용하여 전역 스타일을 설정할 수 있다

이는 애플리케이션 전체에 공통으로 적용할 스타일을 지정할 때 유용!

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
  }
  input {
    width: 90%;
  }
  span {
    color: pink;
    &:hover {
      background-color: white;
    }
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <div>My App Content</div>
    </>
  );
}

export default App;

위 예제에서는 GlobalStyle을 사용해 모든 요소의 기본 마진과 패딩을 제거하고, input과 span태그에 스타일을 지정함

이를 통해 애플리케이션 전역에서 일관된 스타일링을 쉽게 적용할 수 있음

 

SCSS 문법을 사용할 수 있는 이유

Styled-Components는 SCSS와 유사한 문법을 사용할 수 있게 해주는 CSS-in-JS 라이브러리

이는 Styled-Components가 CSS 문법을 확장하여 중첩 스타일, 조건부 스타일링 등 다양한 SCSS 기능을 지원하기 때문

Styled-Components 내부적으로 이러한 스타일을 JavaScript에서 정의하고, 런타임에 적절한 CSS를 생성하여 DOM에 적용하며

이를 통해 SCSS의 장점을 그대로 살리면서 컴포넌트 단위로 스타일을 관리할 수 있다!!