React styled-components 라이브러리

1.  styled-components 설치하기

npm install styled-components

 

2.  styled-components 사용법

• styled.div 로 한개의 스타일을 만들어 줍니다.( ` 백틱 기호를 사용해서 CSS를 넣습니다.)
• VScode 사용시 vscode-styled-components 확장프로그램 설치하면 자동완성이 가능합니다.

import styled from 'styled-components';

let Box = styled.div`
  padding : 15px;
  color : grey
`;

function Home(){
  return (
    <div>
      <Box>박스입니다</Box>
    </div>
  )
}

 

3.  styled-components props 기능

• ${ props => props.bg } styled-components의 props 문법

import styled from 'styled-components';

let Box = styled.div`
  background : ${ props => props.bg };
  padding : 15px;
  color : grey
`;

function Home(){
  return (
    <div>
      <Box bg="red">레드</Box>
      <Box bg="blue">블루</Box>
    </div>
  )
}

 

4.  styled-components 장단점

- 장점

• CSS 파일 작성필요 없이 JS파일로 스타일 적용이 가능합니다.
• 다른 JS 파일에 적용되지않는 스타일 속성으로 모듈화가 가능합니다.
• 페이지 로딩 시간이 단축됩니다.

- 단점

• JS 코드가 복잡해집니다. 컴포넌트 구분이 어럽게 됩니다.
• 중복 디자인이 많은 경우 일반적인 CSS와 차이점이 사라질 수 있습니다.
• 퍼블리셔가 존재하는 회사의 경우 퍼블리셔가 styled-components모르는 경우 재작업의 필요합니다.