왜 Styled Components를 써야할까?

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

  render(
  <div>
    <Button>Normal</Button>
    <Button width="100">Primary</Button>
  </div>
  );
  // 만약 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;
  `;

# Nesting


```js

render(
  <>
    <Thing>Hello world!</Thing>
    <Thing>How ya doing?</Thing>
    <Thing className="something">
			<span className="contents">The sun is shining...<span>
		</Thing>
    <div>Pretty nice day today.</div>
    <Thing>Don't you think?</Thing>
    <div className="something-else">
      <Thing>Splendid.</Thing>
    </div>
  </>
)

const Thing = styled.div`
  color: blue;

  &:hover {
    color: red;
  }

  #id {
		div {
	    background: orange;
		}
  }

  .something-else & {
    border: 1px solid;
  }
`