styled component

리액트 외부 라이브러리.
js파일 스타일링에 도움을 줌
고유한 문법으로 js파일에 컴포넌트를 제작.

• css안쓰고 html 스타일링을 가능하게해줌.

props문법 / 다른 js에서 컴포넌트 import등으로 유용한 사용가능.
스타일링에 프로그래밍문법 적용가능. (백그라운드 컬러가 파란색일시 글자색을 회색으로 준다던지).

장점

1.페이지로딩이 빠름

• html 태그의 style=로 바로 쏴줌.
  css파일 불러와서 어쩌구 안함. 심플하게 필요한 스타일만 딱 가져와 적용하니 빠름.

2.다른 js파일로 스타일 번지는거 막아줌

• 특정 js파일에서 좀 색다르게 컴포넌트를 만든거라서, css파일처럼 여러군데에 적용안됨.
  근데이건 css에서 클래스명 잘 작명하거나, App.module.css처럼 css파일 작명 잘해주면 되는거라 styled-component만의 장점이라 보긴 어려운거같음.

3.js파일 하나면 스타일링 끝! WA!!!

단점

1.협업에 불리

• 기존 CSS잘쓰다가 이거쓰라하면 이게뭔지 홈페이지부터 들어가야함.
  근데 또 이게 기존 css를 버리고 갈아탈만큼 혁신적이냐 하면 또 그건 아니라고 봄.
  장단점이 있고, 프로젝트 도입 전에 고려해볼 정도라고 생각함.

2.js파일이 복잡해짐.

• 가뜩이나 쓸것도 많은데 이것까지 더해지면 머리아픔.
  거기다 일반컴포넌트인지, styled-component인지 따로 구분도 안되서, 네이밍등으로 구분도 해줘야함.

3.js파일에 독립적용이라 다른데서 적용힘듬.
위의 장점이 바로 단점으로 연결됨. 여러 곳에서 재사용해야하는 styled-component가 있다고 하면 이걸 또 다른 js파일로 export를 시켜줘야하는데, 그럴바엔 css쓰지 라는말이 나옴.

결론

그냥 알아만 두고 css쓰자.
이런게 있고 이렇게 쓸 수 있구나~ 정도로만 알아두고 나중에 필요하면 꺼내먹어야지.