React | style-component

What's style-compoent

styled components는 javascript에서 css를 사용 할 수 있도록 도와주는 스타일링 프레임워크입니다. React Component에 특정 스타일링을 할 수 있기 때문에 재사용성을 더 높일 수 있고, javascript에 영향을 받는 스타일링을 간편하게 구현 할 수 있습니다.

설치 방법

npm add styled-componets

Import 하기

import styled from 'styled-components'

기존방식의 CSS 스타일링

const container = {
	display: flex;
    align-items : center;
    ...
return <div style={container}></div>

styled-component 적용

const Container = styled.div`
	display: flex;
    align-items: center;
    ...
`
return <Container></Container>

기존의 방식과 다르게 styled-components를 적용하게 되면 component를 직접적으로 생성하기 때문에 재사용성과 생산성에 도움이 됩니다.
또 key value의 형태가 아닌 css의 문법을 그대로 사용하기 때문에 기존 css의 사용법보다 가독성도 높습니다.