[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>
)
}
Author And Source
이 문제에 관하여([TIL] Styled-Component), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@alexjlee/TIL-Styled-Component저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)