11장. CSS-in-JS

11.1 CSS-in-JS 란?

** [p.328] 아... 인라인 스타일 설명이라니... 개킹받네여 ㅋㅋㅋㅋㅋㅋㅋ

• CSS-in-JS 를 사용하면 JS 로 CSS 를 컨트롤이 가능하여 선언적으로 유지 보수가 가능해 더 강력한 추상화 수준 제공

11.1.1 CSS-in-JS 와 인라인 스타일의 차이

CSS-in-JS 의 장점

• 컴포넌트 단위로 추상화가 가능하여 컴포넌트 단위로 스타일 관리 가능
• CSS 특유의 캐스캐이딩에서 자유로워 부모로 부터 독립적으로 사용이 가능하다
• CSS 의 전역 네임스페이스에서 오는 선택자 충돌을 피하는 스코프를 제공
• 자동으로 벤더 프리픽스가 생성되어 브라우저 호환성 증가
• JS 의 상수와 함수 활용이 가능하여 스타일 로직을 편리하게 관리 가능

11.1.2 CSS-in-JS 등장 배경

CSS 의 문제점

• 글로벌 네임스페이스로 인한 클래스명 충돌 이슈
• 의존성 이슈로 스타일 누락 문제
• 유지 보수적 측면에서 불필요한 CSS 삭제를 하기 어렵다
  • 종속성 때문인가?
• 클래스 이름의 최소화가 어렵다
• 상수 값의 공유가 어렵다(현재는 VSS Variable 로 해결 가능)
• CSS 로딩 순서에 따라 스타일 적용이 달라짐
• CSS 를 캡슐화 하기 어렵다

** [p.331] 불필요한 코드 제거가 어렵다는 건 어떤 부분일까요? ** [p.332] 웹 어플리케이션의 분리 방식 변화 그림은 그림 한 장으로 많은 생각을 하게 되네요

11.1.3 CSS-in-JS 사용하기

11.2 유틸리티 함수를 활용하여 styled-components 의 중복 타입 선언 피하기

• 컴포넌트로 전달되는 props 와 style 에 전달하기 위한 props 의 중복 이슈는 TS의 Pick, Omit 등으로 해결이 가능

props 타입과 styled-componets 타입의 중복 선언 및 문제점

const HrComponent = styled.hr<Pick<Props, 'height' | 'color' | 'isFull'>>`
  // ...
`;

• 위와 같이 Pick 유틸리티를 타입을 활용하면 중복되는 타입을 피할 수 있다