[12일차] React Component Styling

css,sass
css, sass 를 리액트 create-app 에서의 import 하는 방식은 전역적으로 순서대로 불러오게된다.

여러가지 스타일 들이 순서대로 전역적으로 불러오게됨

이런전역적으로 적용되는 스타일들이 react처럼 기능별로 분리하는 성격과 맞지않는다 생각하게됬고 ,
이를 보안하기위해 css module 이나  styled-components 등이 등장했다.

css module, sass module ,styled-components 

className 의 중복을 막아주고 로직을 분리해서 재사용성을 높이고 유지보수에 용이하다는 장점이있다.
react의 부모 컴포넌트의 css 가 자녀에 적용이되서 side effect 발생확률이 높아진다.
하지만 리액트처럼 기능분리가 확실치 않은 프로젝트에 경우에는 오히려 혼란을 초래할수있다.
또한 styled-components 는 css 모듈의 장점과 함께 더 편리한 사용이 가능하다 
그런데도 css module 을 사용하는 이유는 ? 
자바스크립트의 코드 길이가 렌더링 성능에 영향을 미치기때문에 줄이는것이 가장 좋고 , 
리렌더링을 최소화 하더라도 css 코드가 함께 리렌더링 된다.