styled-component 사용하는 이유

1. styled-component 설치

npm i styled-components

import styled from 'styled-components'

설치 후 사용할 컴포넌트에서 import 해준다.

2. 사용법

const Box = styled.div`
  background: #ddd;
  padding: 20px;
`;
const YelloBtn = styled.button`
  background: ${(props) => props.bg};
  color: ${(props) => props.bg == "blue" ? "white" : '#000'};
  padding: 10px;
`;
const NewBtn = styled.button(YelloBtn);

<Box>
  	<YelloBtn bg="blue">버튼</YelloBtn>
	<YelloBtn bg="orange">버튼</YelloBtn>
</Box>

변수에 담아 컴포넌트처럼 사용 가능하다.

하나의 버튼을 만들어놓고 배경 색깔만 바꾸고 싶다면 props 문법으로 여러가지 색상을 부여할 수 있다.

3. 장점

1. CSS 파일 없이 JS파일에서 바로 스타일을 넣을 수 있다.
2. 컴포넌트 내에 적은 스타일이 다른 JS파일로 오염되지 않는다.
3. html <style> 태그에 넣어주기 때문에 페이지 로딩 시간이 단축된다.

일반 css파일도 다른 JS파일에 오염되지 않게 적을 수 있다.
컴포넌트명.module.css 파일명에 module을 적어준다.

4. 단점

1. JS파일이 복잡해지고 일반 컴포넌트인지 styled 컴포넌트인지 헷갈린다.
2. JS파일간 중복 스타일이 많아지면 그냥 CSS파일 import하는 것과 큰 차이가 없다.
3. styled-component를 안쓰는 디자이너와 협업할 때 불편할 수 있다.
4. 개인적인 불편함 자동완성이 안된다.