Styled Component

오늘 강의에서 Styled Components에 대해 배웠다.

우선 강의를 보고 따라 했고 따라 하면서 느낀 점은 공통 CSS를 만드는데 편리하겠다는 생각을 했다.

그러나 많은 컴포넌트를 생성했을 때 관리하기 쉽지 않아 보였고 더군다나 렌더링 성능에 영향을 줄 수 있다 하니 적절하게 사용하는 것이 좋다는 생각을 했다.

많이 만들었다가는 내가 감당을 하지 못할 거 같은...

우선 강의로 간결하게 알아봤지만 더 많은 내용을 알아내기 위해 GPT를 이용했다.

Styled Component란?

Styled Components는 React 애플리케이션에서 스타일을 관리하기 위한 라이브러리다. 이 라이브러리는 JavaScript와 CSS를 결합하여 컴포넌트 단위로 스타일을 작성할 수 있게 해 준다.

 

Styled Component의 장점

• 컴포넌트 기반 스타일링
  스타일을 컴포넌트와 함께 정의할 수 있어, 재사용 가능하고 유지보수가 용이하다. 각 컴포넌트가 독립적으로 스타일을 가지므로, 스타일 충돌을 피할 수 있다.
  
  
• 자동 범위 지정
  스타일이 컴포넌트에 자동으로 범위 지정되므로, 전역 스타일 오염을 방지할 수 있다.
  
  
• 동적 스타일링
  props를 이용해 컴포넌트의 스타일을 동적으로 변경할 수 있어, 다양한 상태를 손쉽게 처리할 수 있다.
  
  
• CSS의 모든 기능 지원
  CSS의 다양한 기능(미디어 쿼리, 상속, 복잡한 선택자 등)을 그대로 사용할 수 있어, CSS의 유연성을 유지하면서 JavaScript와 함께 스타일을 관리할 수 있다.
  
  
• 자동 벤더 프리픽스
  CSS 속성에 필요한 벤더 프리픽스를 자동으로 추가해 주어, 브라우저 호환성 문제를 줄여준다.
  
  
• 서버 사이드 렌더링 지원
  서버 사이드 렌더링(SSR)을 지원하여, 초기 로딩 시 스타일이 적용된 HTML을 서버에서 생성할 수 있다. 이는 SEO와 페이지 로딩 성능에 도움이 된다.
  
  

Styled Component의 단점

 

• 러닝 커브
  CSS-in-JS 개념에 익숙하지 않은 개발자에게는 학습 곡선이 있을 수 있다. 특히 전통적인 CSS나 Sass와 다른 접근 방식을 이해하는 데 시간이 걸릴 수 있다.
  
  
• 번들 크기
  Styled Components는 런타임에 스타일을 생성하므로, 번들 크기가 커질 수 있다. 이는 특히 대규모 애플리케이션에서는 성능에 영향을 줄 수 있다.
  
  
• 디버깅 어려움
  컴포넌트 스타일이 동적으로 생성되므로, 디버깅 시 CSS의 실제 적용 상태를 추적하기 어려울 수 있다. CSS 클래스 이름이 자동으로 생성되기 때문에, 디버깅 도구에서 이를 식별하는 데 어려움이 있을 수 있다.
  
  
• 성능 문제
  스타일이 동적으로 생성되면서, 렌더링 성능에 영향을 줄 수 있다. 특히 큰 애플리케이션에서 많은 스타일 컴포넌트를 사용할 경우 성능 저하가 발생할 수 있다.
  
  
• 추가 의존성
  Styled Components를 사용하기 위해서는 추가적인 라이브러리와 도구를 의존하게 되며, 프로젝트의 복잡성을 증가시킬 수 있다.

Styled Components는 현대적인 React 애플리케이션에서 많이 사용되는 도구로, 많은 장점을 제공하지만, 사용 시 고려해야 할 몇 가지 단점도 존재한다. 프로젝트의 요구사항에 따라 적절한 도구와 접근 방식을 선택하는 것이 중요하다.

 

CSS-in-JS의 개념

CSS-in-JS는 JavaScript 파일 내에서 직접 CSS 스타일을 정의하고 관리하는 방법을 의미한다. 전통적인 CSS 방식에서는 스타일을 별도의 CSS 파일에 작성한 후 HTML 파일에서 이를 링크하여 사용하는 반면, CSS-in-JS는 JavaScript 코드 안에서 스타일을 정의하고 적용할 수 있게 해 준다.

 

 

 

CDD의 개념

CDD (Component Driven Development)는 사용자 인터페이스(UI)를 개발할 때 컴포넌트를 중심으로 개발을 진행하는 접근 방식이다. 전통적인 UI 개발 방식이 전체 페이지나 애플리케이션을 동시에 고려하면서 개발하는 것과 달리, CDD는 작은 단위의 컴포넌트를 독립적으로 개발하고 테스트하여 전체 UI를 구성해 나가는 방법이다. 이 접근 방식은 특히 UI 라이브러리와 프레임워크(예: React, Vue.js)와 함께 사용될 때 유용하다.

 

 

• 컴포넌트 중심 개발
  UI를 독립적이고 재사용 가능한 컴포넌트로 나누어 개발한다. 각 컴포넌트는 UI의 한 부분을 담당하며, 독립적으로 디자인, 개발, 테스트가 가능하다.
  
  
• 컴포넌트 라이브러리
  개발 과정에서 사용될 컴포넌트를 모아 놓은 라이브러리를 작성한다. 이 라이브러리는 다양한 컴포넌트 상태와 변형을 문서화하고, 시각적으로 확인할 수 있는 도구를 제공한다.
  
  
• 스토리북(Storybook) 등의 도구 사용
  컴포넌트의 다양한 상태를 시각적으로 확인하고 테스트할 수 있는 도구(예: Storybook)를 사용하여 개발한다. 이는 컴포넌트를 독립적으로 개발하고 문서화하는 데 도움을 준다.
  
  
• 독립적인 테스트
  각 컴포넌트는 독립적으로 테스트할 수 있다. 이는 UI의 특정 부분을 변경하거나 개선할 때 전체 애플리케이션에 미치는 영향을 최소화할 수 있게 해 준다.
  
  
• 재사용성과 유지보수 용이성
  컴포넌트 기반 접근은 재사용성을 높이고, UI의 일관성을 유지하며, 코드의 중복을 줄이는 데 도움을 준다. 각 컴포넌트는 독립적으로 유지보수할 수 있어, 변경 사항이 다른 부분에 미치는 영향을 줄일 수 있다.

Styled Components 기본 사용법

 

우선 Styled Components를 사용하기 위해서는 설치가 필요하다.

npm install styled-components // 터미널에 입력

import styled from "styled-components" // 사용할 페이지에 입력

 

 

Styled Component에서는 SCSS 문법을 지원한다. 단 SCSS의 변수나 Mixin 기능은 지원하지 않는다.

중첩 문법은 사용이 가능하다.

 

컴포넌트 만들기

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

const BlueButton = styled.button`
  height: 32px;
  padding: 0 10px;
  background-color: blue;
  border: none;
  border-radius: 4px;
  color: white;
`;

컴포넌트의 이름을 정하고 styled.tagName`CSS 속성값`을 입력한다. 위의 코드를 반영하면 이런 결과가 만들어진다.

파랑색 버튼

 

 

컴포넌트 재사용

<BigBlueButton>커다란 파란색 버튼</BigBlueButton>

const BigBlueButton = styled(BlueButton)`
  height: 48px;
  padding: 0 20px;
`;

위의 BlueButton을 재사용해 추가적인 CSS를 입력해서 새로운 컴포넌트를 만들고 싶으면 새로운 컴포넌트의 이름을 정하고 styled(재사용할 컴포넌트 이름)`CSS 속성값`을 입력한다.

커다란 파란색 버튼

위의 버튼 컴포넌트를 재사용해 높이와 여백의 값을 더 추가했고 기존의 파란색 버튼보다 더 큰 파란색 버튼을 만들 수 있다.

 

그리고 Styled Component로 만들면 좋은 점이 클래스를 따로 만들지 않아도 된다.

자동 생성된 클래스

 

이처럼 알아서 클래스를 생성해 주기 때문이다.

 

작업을 하다 보면 클래스를 작성해줘야 하는데 이게 작업할 페이지가 많고 코드가 길어지다 보면 클래스명을 짓는 데에 어려움이 많다. 그런 점에서 자동으로 클래스를 부여해 주는 큰 장점이 있는 것 같다.

그러나 이건 장점이자 단점인듯하다. 나중에 수정이 필요한 상황이 왔을 때 일반적인 CSS파일에서 작성했을 때는 어디에 작성했는지 어떤 클래스에 적용되어 있는지를 바로 알 수 있는데 Styled Components로 생성 시 위치가 명확하지 않기 때문에 어디에 생성했는지를 찾을 수가 없다. 나의 생각은 공통 CSS에서 버튼이나 인풋 같은 단조로운 형상을 작업할 때는 유용할 듯 하나 Card나 Box 같은 하나의 UI를 만들 때에는 깊은 고민을 해봐야 할 것 같다.

 

Props 사용하기

const PropsButton = styled.button`
  background-color: ${props => props.backgroundColor || 'white'};
  color: ${props => props.textColor || 'black'};
  padding: ${props => props.padding || '0'};
`;

<PropsButton backgroundColor="yellow" textColor="red" padding="20px 10px">Props 버튼</PropsButton>

Styled Components의 Props는 컴포넌트를 생성할 때 미리 어떤 CSS가 들어갈지 설정한다.

그리고 그 스타일을 컴포넌트를 사용하는 태그에서 직접 하나하나 변경이 가능하다. 또 설정하지 않을 것을 대비해 미리 컴포넌트에서 기본값을 입력한다. `||` 뒤에 오는 값이 기본값이다.

 

이렇게 하면 컴포넌트 하나로 PropsButton이 다양한 스타일의 버튼을 만들 수 있다.

하지만 유용하게 쓰이는 구간이 있을 수 있지만 페이지를 작업할 때 일반적으로는 색상을 미리 정해두고 가기 때문에 유연하게 바꿔야 할 영역라면 사용하겠지만 그렇지 않다면 사용하지 않을 듯하다.

 

전역 스타일 사용하기

Styled Components를 사용하여 전역 스타일을 적용하려면, createGlobalStyle 함수를 활용할 수 있다. 이 함수는 전역 CSS를 정의하고 적용하는 데 도움을 준다. 전역 스타일은 애플리케이션 전체에 걸쳐 적용되는 CSS를 정의할 때 유용하다.

import { createGlobalStyle } from "styled-components"

function App(){
  return (
    <GlobalStyle />

    const GlobalStyle = createGlobalStyle`
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
    `
  )
}

 

이 함수는 전역 스타일을 포함하는 컴포넌트를 반환한다.

이 컴포넌트를 애플리케이션의 루트 또는 필요에 따라 적절한 위치에 추가하면, 모든 하위 컴포넌트에 해당 스타일이 적용된다.

이 방식으로 styled-components를 사용하면 전역 스타일을 쉽게 관리하고, CSS-in-JS의 이점을 활용하여 더욱 모듈화 된 스타일을 적용할 수 있다.

 

CSS파일을 아예 만들지 않겠다고 하면 당연히 사용하겠다만 그렇지 않은 거라면 딱히 사용할 이유는 없어 보인다.

그냥 css에서 간단하게 하면 될 거 일을 크게 만드는 느낌이 든다.

그래도 우선 작성법과 사용법을 알아야 나중에 사용을 해도 할 것 아닌가..

 

일단 강의로 배웠고 과제이기 때문에 더 많은 정보를 원해 검색을 해봤지만 위에서도 언급했듯이 많이 만들었다가는 감당을 하지 못할 것만 같았다. 간결한 곳에 포인트를 주는 듯이 사용하는 건 정말 좋을 것 같지만 많은 컴포넌트를 생성했다가는 수정사항이 생겼을 때나 유지보수를 함에 있어서는 잦은 사용은 딱히 좋은 것 같은 느낌은 아니다.