style-component

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를 구성한다.