CSS module

CSS를 모듈화 하여 사용하는 방법
.module.css 확장자로 작성

CSS module을 사용하는 이유

1. className 중복을 막아준다
2. 유지보수에 용이

react에서 모듈을 사용하지 않으면 부모 컴포넌트의 css가 자녀들에게 모두 적용되기 때문에
side effect 발생 확률이 높아진다

모듈화된 CSS가 React 컴포넌트 분리와 잘 어울리기에 함께 사용하기 좋은 것 같다

코드의 재사용성을 높이고
로직을 분리하여 유지 보수에도 용이하다

CSS module의 단점

React처럼 기능별 분리가 확실하지 않은 다른 프로젝트의 경우 경우
css파일을 분리하면 오히려 혼란을 초래하는 경우도 있다고 한다..
-> 이거시 레거시..?

styled-components

CCS-in-JS의 대표 주자
styled-components를 사용하면 css모듈의 장점과 함께
더 편리한 사용을 할 수 있다

그럼에도 CSS module을 사용하는 것은

1. 자바스크립트 코드의 길이가 렌더링 성능에 영향을 미친다
   -> jsx 파일은 결국 자바스크립트 파일로 해석되기 때문에 줄일수록 성능에 좋다
2. 리렌더링을 최소화 하더라도 css 코드가 함께 리렌더링 된다
   -> useMemo 등을 잘 써서 최적화를 한다 해도 리렌더링시 styled에는 css코드가 함께 렌더링 된다