style-component

안재우·2021년 11월 21일

styled-components 는 현존하는 CSS in JS 관련 리액트 라이브러리 중에서 가장 인기 있는 라이브러리.

SASS는 기존 css의 문제점을 많이 보완했지만 여전히 해결되지 않은 문제가 있다.

  • CSS 클래스 명에 대한 고민.
  • 정해진 가이드가 없으면 구조가 복잡해진다.
  • 방대한 스타일 정보.
  • 여전히 CSS 클래스로 조건부 스타일링.
  • CSS 클래스로 조건부 스타일링을 하더라도 동적인 변화를 표현하기에 한계존재.
    • ex. 1초에 px 값을 1씩 증가 → Inline 스타일에 의존

왜 styled-components를 이용하는지?
-자유로운 CSS 커스텀 컴포넌트를 만들 수 있고 여러가지 다른 사유또한 존재한다.

설치

npm install --save styled-components

내가 style-components를 적용시킨 것

이런식으로 컴포넌트 자체에 속성과 스타일을 적용시켜 UI를 구성한다.

profile
프론트개발자

0개의 댓글