[TIL] Styled-Component

Today I Learned

Styled Components의 주요 특징

Styled Components는 컴포넌트 기반 아키텍처를 보장한다.

• 화면에 표시된 컴포넌트들에 해당하는 스타일링만 자동으로 주입하기때문에 불필요한 스타일링까지 로드할 필요가 없다
• 각 스타일링마다 고유 클래스명을 자동으로 생성해주기 때문에 class 이름 충돌 걱정 없이 사용할 수있다.
• 특정 컴포넌트에 해당하는 스타일링을 구분하기 쉽기 때문에 컴포넌트 삭제시 결합된 스타일도 같이 삭제하기 용이하다.
• props를 사용하여 동적인 변화를 표현할 수 있다.
• 특정 컴포넌트에 영향을 주는 스타일링을 찾아 여러 파일을 찾을 필요가 없다. 유지보수가 용이하다.
• vender prefix를 알아서 처리해 준다.
• 단점 : 성능면에서는 SASS가 나을 수 있음

Styled Components 설치

npm install --save styled-components

Styled Components 사용예

import styled from 'styled-components';

const Modal = () => {
  const Button = style.button`
    background: ${props => props.primary ? "purple" : "grey"};
    color: ${props => props.primary ? "white" : "black"};
    padding: 12px;
  `;
  
  render(
    <div>
      <Button primary>x</Button>
      <p>Hello World</p>
    </div>
  )
}