[React] styled-components 란?

styled-componets 란?

- 컴포넌트 기반 방식으로 css스타일을 작성하고 관리할 수 있는 React 라이브러리입니다.  구성 요소 내에서 직접 스타일하며 의도하지 않은 스타일이 다른 구성 요소로 유출 되는 위험을 제거합니다.

// 설치
$ npm install --save styled-components

---

import styled from 'styled-componets'

const DivStyle = styled.div`
width : 100px;
height : 100px;
`
const TestContainer = ()=>{

  return (
  <DivStyle>스타일컴포넌트</DivStyle>
  )
}


export default TestContainer

---

styled-components의 장점

- 정의된 스타일은 정의된 요소에만 적용되므로 의도하지 않은 스타일이 다른 구성요소에 영향을 줄 위험이 없습니다.

- 결국은 변수에 할당된 값이 이므로 전체적으로 쉽게 재사용할수 있어 디자인의 일관성 유지가 쉽습니다.

- 동적 조정이 가능하여 반응형 디자인이나 조건부 스타일을 쉽게 구현할 수 있습니다.

- 스타일이 지정된 구성요소는 서버측 렌더링과 호환되어 로드 시간을 단축시키고 SEO를 개선할 수 있습니다.

 

styled-components의 단점

- 각 스타일 구성 요소들은 고유한 클래스 이름을 생성하여 최종적인 css파일이 커질 수 있습니다.

- 생성된 클래스가 스타일로 인식되지 않아 디버킹하기가 쉽지 않습니다.

- React를 사용하고 있는 사용자에게 익숙하기 때문에 CSS-in-JS에 익숙하지 않으면 사용하기 불편합니다.