11장. CCS-in-JS

CSS-in-JS

• CSS-in-JS의 장점
  • 컴포넌트로 생각할 수 있다.
    • CSS-in-JS는 스타일을 컴포넌트 단위로 추상화하여 생각할 수 있게 해준다.
    • 따라서 별도의 스타일시트를 유지보수할 필요 없이 각 컴포넌트의 스타일을 관리할 수 있다.
  • 부모와 분리할 수 있다.
    • CSS에는 명시적으로 정의하지 않은 경우 부모 요소에서 자동으로 상속되는 속성이 있다.
    • 하지만 CSS-in-JS는 이러한 상속을 받지 않는다.
    • 따라서 각 컴포넌트의 스타일은 부모와 독립되어 독립적으로 동작한다.
  • 스코프를 가진다.
    • CSS는 하나의 전역 네임스페이스를 가지기 때문에 선택자 충돌을 피하기 어렵다
    • 하나의 프로젝트 내에서는 BEM과 같은 네이밍 컨벤션이 도움을 줄 수 있지만, 서드파티 코드를 통합할 대는 도움이 되지 않는다
    • CSS-in-JS는 CSS로 컴파일될 때 고유한 이름을 생성하여 스코프를 만들어준다.
    • 따라서 선택자 충돌을 방지할 수 있다.
  • 자동으로 벤더 프리픽스가 붙어 브라우저 호환성을 향상해준다.
    • 벤더 프리픽스 : 웹 브라우저마다 지원되는 CSS 속성이나 기능이 다를 때 특정 브라우저에서 제대로 동작하도록 하기 위해 추가되는 접두사를 말한다.
• CSS-in-JS 등장배경
  • 웹 환경이 변하면서 요구 사항이 다양해지고, 이로 인해 UI 설계는 점차 복잡해졌다.
  • 순수 CSS의 문제점
    • 글로벌 네임스페이스 : 모든 스타일이 전역 공간을 공유하므로 중복되지 않는 클래스 이름을 고민해야 한다.
    • 불필요한 코드 제거 : 기능 추가, 수정, 삭제 과정에서 불필요한 CSS 삭제가 어렵다.
    • 최소화 : 클래스 이름을 최소화하기 어렵다
    • 상수 공유 : 자바스크립트와 상태 값을 공유할 수 없다 (이에 대한 해결책으로 현재는 CSS Variable 도입됨)
    • 비결정적 해결 : CSS 로드 순서에 따라 스타일 우선순위가 달라진다
    • 고립 : CSS 외부 수정을 관리하기 어렵다(캡슐화)
• CSS-in-CSS과 CSS-in-JS
  • CSS-in-JS의 단점
    • CSS-in-JS를 적용하기 위해서는 별도의 라이브러리를 설치해야 함
    • 런타임에 스타일을 생성하기 위한 동작이 필요하기 때문에 CSS-in-CSS에 비해 성능적인 측면에서 뒤떨어질 수 있다.
  • CSS-in-JS의 장점
    • 동적인 대규모 웹 애플리케이션 또는 웹 서비스를 컴포넌트 기반으로 개발할 때 적용하면 생산성을 획기적으로 높일 수 있다.

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

• 유틸리티 타입을 활용하지 않을 때, 중복되는 타입과 관리해야 하는 포인트들이 늘어나게 된다.
  • props에서 받은 타입을 styled-components에 적용할 때
  • 상속받는 컴포넌트나 부모 컴포넌트에서 자식 컴포넌트로 넘겨주는 props 등
• 이러한 경우에 Pick이나 Omit 같은 유틸리티 타입을 활용하면 중복되는 타입을 피할 수 있어 유지보수적인 측면에서 긍정적인 효과를 얻을 수 있다.