SASS도 있는데 왜 써?

SASS는 기존 CSS의 많은 부분을 개선했지만, 여전히 해결되지 않는 부분이 존재한다.
1. 클래스명에 대한 고민
2. 정해진 가이드가 없으면 구조가 복잡하다.
3. 방대한 스타일 정보로 스크롤 지옥.
4. 조건부 스타일링
5. 동적인 변화를 표현하기에 한계

기술은 언제나 문제를 해결하기 위해 등장한다. 그래서 등장한게 Styled Components!!

설치방법

npm install --save styled-components

Styled Components?

• styled-component는 클래스명에 대한 고민을 할 필요가 없다! 왜? 스타일에 대한 고유한 클래스명을 자동으로 생성해주기때문..그덕분에 중복에 대한 오류가 없습니다.

• 자유로운 CSS 커스텀 컴포넌트를 만들 수 있습니다!

우선 React의 경우 컴포넌트가 많으면 많아질수록 분리되어 있는 CSS 파일들을 일일이 찾아 수정하는 것이 얼마나 귀찮고 짜증 나는 일인지는 다들 동감하실 겁니다.
만약 styled-components를 사용하신다면, CSS를 컴포넌트화하여 JSX로 사용할 수 있습니다.
뿐만 아니라, 결정적인 요인은 바로 CSS에 Props를 사용할 수 있다는 점입니다.
React의 주요 메커니즘 중 하나인 Props를 CSS에 적용할 수 있다는 것 때문에 특정 컴포넌트에서는 styled-components를 적용하는 것이 엄청난 효율을 가져오는 것 같습니다.
이러한 매력을 저만 느꼈던 것이 아닌지 styled-components는 현재 npm에서 주마다 약 160만번이나 다운로드 되고 있으며 인기 있는 대세 라이브러리가 되었습니다.

사용법

styled-components 라이브러리에서 import 해온 styled라는 객체를 이용합니다
아래와 같이 h1 태그를 만들어 Title이라는 스타일드 컴포넌트를 만들 수 있습니다

import styled from 'styled-components'

render(

<Title>
  Hello World!
</Title>

html 태그 이름 뒤 Tagged Templete 문법을 활용해 CSS 속성을 정의하고 있습니다
앞서 학습했던 Templete Literals 문법(``)의 확장이라고 생각해도 좋습니다

const Wrapper = styled.section padding: 4em; background: papayawhip;;

const Title = styled.h1 font-size: 1.5em; text-align: center; color: palevioletred;;

가장 많이 쓰이는 항목

render(

만약 Button 컴포넌트에 전달된 props(width)가 200 미만(조건)이면
삼항연산자 true : "palevioletred"
삼항연산자 false : "white"

const Button = styled.button background: ${props => props.width < 200 ? "palevioletred" : "white"}; color: ${props => props.primary ? "white" : "palevioletred"}; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px;;