[Styled Component] 기초연습

✅ Styled Component

Styled Component는 쉽게 말하면 CSS/SCSS를 'Component화' 하는 것이다.

현대 웹 앱이 컴포넌트를 기반으로 성숙해가면서 CSS 스타일링 방법론 또한 컴포넌트를 기반으로 재구성되고 있다.

이러한 고민 속에서 등장한 패러다임이 CSS-in-JS이고, 다시 그 중 가장 인기 있는 라이브러리가 바로 Styled-Components인 것이다.

Styled Component는

• 클래스명을 해시값으로 자동 생성하고, 클래스명 오염 또한 방지할 수 있다.
• CSS 문법을 온전하게 사용할 수 있다.
• 자바스크립트의 동적인 값들을 온전하게 사용할 수 있다.
• CSS-in-JS는 CSS를 문서(.css) 단위가 아니라 컴포넌트 단위로 추상화하여 적용하기에 좋다.

✅ 사용 예시

[Syntax]

import styled from 'styled-components'

render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

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

[가장 많이 쓰이는 항목]

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