왜 Styled-components를 쓰는가?

react에서 styled components를 안쓰고 css 적용하는 세가지 방법

1. inline css
js code를 써서 별로
hover도 못씀

2. 전역 css e.g)index.css
코드가 전역에 적용되어 세부 조정하기가 힘듦

3. 파일이름.module.css 모듈 방식
계속 className을 복붙해줘야함

styled-components의 장점

이해하기 쉽고 쓰기도 용이함

css 파일을 확인하지 않아도 해당 div가 어떤역할을 하는지 알 수 있다

 

- 스타일링된 컴포넌트를 쓸 수 있는데 컴포넌트 함수 안에 스타일을 써줄 필요가 없음
- 알아보기 더 쉬운 컴포넌트 이름을 정할 수 있음
- 같은 스타일 컴포넌트를 한가지 스타일 value만 바꿔서 
  여러번 쓸 때 props를 인자로 받아서 해당 컴포넌트에 전달해 줄 함수를 만들어서
  복사 붙여넣기를 줄일 수 있음. 설정 가능한 컴포넌트를 만들 수 있다.
- 컴포넌트의 모든 요소를 유지면서 새로운 코드를 추가할 수 있는 extend 기능을 사용할 수 있다.

- 스타일 컴포넌트의 스타일을 유지하는 상태로 html 태그 이름만 바꿔줄 수 있다 (as = "새 태그 이름")

- 같은 스타일 컴포넌트들에 공통으로 적용될 속성을 한번에 줄 수 있다. (.attrs({ key: value, key: value, ...}))

- Pseudo selector로 더 정돈된 코딩을 할 수 있다

 

CSS랑 조합해서 쓸 수 있는 소소하지만 유용한 기능들이 많이 있다!!