[CSS] Styled-Component 개념과 사용법

CSS에는 일반적인 CSS, SCSS, 스타일드 컴포넌트, 테일윈드 등 다양한 방법이 있다.
그 중 스타일드 컴포넌트는 React에서 사용되는 대표적인 CSS-IN-JS 라이브러리다.

여기서 CSS-IN-JS란? JS 안에서 CSS를 작성하는 방식을 뜻한다.
일반적인 CSS나 SCSS는 반드시 따로 CSS 파일을 만들어야 했다.
하지만 CSS-IN-JS 속성을 가진 스타일드 컴포넌트는 React와 같은 JS 프레임워크에서 js코드 안에서 사용할 수 있다. 이를 통해 컴포넌트별로 스타일을 관리하고, JavaScript의 모든 기능을 활용해 동적 스타일링이 가능하다.

스타일드 컴포넌트는 UI를 작은 컴포넌트 단위로 나누에 개발하는 CDD (Component-Driven Development)라고 볼 수 있다.
UI를 독립적인 컴포넌트로 만들고 조합하여 전체 UI로 만드는 방법으로 재사용성과 유지보수성이 좋다.

이러한 스타일드 컴포넌트도 장단점이 있다.

장점

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

단점

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

Styled-Component 사용법

우선 스타일드 컴포넌트는 라이브러리이므로 설치를 하고 사용할 페이지에서 임포트로 불러와야 한다.

// 스타일드 컴포넌트 설치
npm install styled-component

// 스타일드 컴포넌트 불러오기
import styled from 'styled-component'

스타일드 컴포넌트는 마치 변수처럼 const 선언을 통해 만들어지며 엘리먼트 기반으로 만들어진다.

예를 들어 파란색 버튼을 만든다고 치자.

const BlueButton = styled.button`
  background-color: blue;
  color: white;
  border-radius: 4px;
  margin: 10px;
`

BlueButton 변수 안에 button 엘리먼트 기반으로 스타일 속성을 준다.
이 BlueButton을 return문에 선언하면 스타일적용이 완료된다.

<BlueButton>파란색 버튼</BlueButton>

스타일드 컴포넌트는 재사용도 가능하다. 기존에 html엘리먼트명이 있던 곳에 재사용할 컴포넌트명을 적고 새로 스타일 속성을 주면 가능하다.

이렇게 되면 기존 스타일속성 + 새로 적용한 스타일 속성 모두 사용할 수 있다.

기존에 만든 BlueButton을 재사용한다고 치자.

const BigBlueButton = styled(BlueButton)`
  background-color: blue;
    width: 200px;
    padding: 10px;
`

기존 BlueButton에 있던 배경색, 글자색, 모서리둥글리기, 마진 값을 모두 재사용할 수 있으면서 넓이와 패딩값도 줄 수 있다.
재사용한 컴포넌트를 또다시 재사용하는 것도 가능하다.

스타일드 컴포넌트는 코드 상에서는 엘리먼트를 포함한 컴포넌트 단위로 작업하지만, 화면 호출했을 때 개발자 창에서는 엘리먼트에 클래스가 적용 된 형태로 보여진다.

여기서 클래스명은 스타일드 컴포넌트에서 자동으로 생성된 네이밍을 사용하며, 클래스마다 겹치지 않게 복잡하고 고유한 네이밍이 지어진다.

<button class="sc-a12345">파란색 버튼</button>

회고: 스타일드 컴포넌트도 이미 알고있는 방법이긴 했지만 이번 기회에 더 자세히 배운 것 같다. 컴포넌트 기반인 리액트에서 아주 잘 어울리는 스타일 방법인 것 같다.