22.06.05 TIL

CSS 파일을 따로 만들 필요가 없다.
보통은 App.js 파일의 스타일링을 위한 App.css가 있고 이를 연결하기 위해 개별 요소에 Classname을 집어넣는데 항상 작명의 고통이 뒤따른다. Styeld-components는 비교적 그 고통을 덜어준다.

다른 JS 파일로 스타일 오염이 일어 나지 않는다.
React의 경우 App.js 등의 한개의 파일이 있고 내부에 여러 컴포넌트 들이 자식 컴포넌트로 들어가 있는 경우가 있는데, 이때 App.css 등의 css 요소가 의도하지 않은 다른 컴포넌트등에 스타일링되는 경우가 있는데, Styled-compoents는 그것을 방지해줌(애초에 Styled된 컴포넌트를 만드는 것이기 때문에)
❗️ CSS 파일 명을 컴포넌트명.module.css와 같이 작성하면 일반 CSS에서도 오염 방지 가능함

로딩 속도 향상에 도움이 된다. Styled-components를 사용하면 CSS 파일이 따로 생성되는 것이 아니라 해당 tag 내 style="" 속성으로 파싱되고 이로인해 브라우저 로딩 속도 향상에 도움이 된다.