가수면

스타일 라이브러리 비교 본문

React/React

스타일 라이브러리 비교

니비앙 2023. 7. 26. 20:40
  렌더링 성능 렌더링 성능 런타임 성능 유지보수 및 기능
스타일드 컴포넌트 장점
컴포넌트를 렌더링 할 때 마다 동적으로 스타일을 생성하고 삽입하기 때문에 매우 유연한 스타일링이 가능하다.
단점
많은 수의 컴포넌트가 빠르게 변경되는 경우 성능에 악영향을 줄 수 있다.
단점
다양한 기능을 제공하기 때문에 비교적 큰 번들 크기를 가지고 있다.
기존 자바스크립트 실행 단계에서 스타일 계산 및 적용이라는 추가 작업이 발생한다.
(<style> 태그로 DOM에 삽입)
단점
런타임에 스타일을 계산하고 삽입한다.
장점
요소의 목적을 분명히 할 수 있으며, 가독성과 유지보수 측면에서 좋다.
theme을 통해 테마링을 쉽게 할 수 있다.
테일윈드 CSS 장점
정적인 스타일 시트를 사용하기 때문에, 스타일 시트가 초기에 한 번만 로드되므로 렌더링 오버헤드가 없다.
단점
동적인 스타일링이 불가능하다.
장점
빌드 과정에서 미사용 되는 스타일을 제거한다.
장점
미리 정의된 클래스를 사용하므로 런타임시 성능이 좋다
장점
개발 시간 단축과 성능 최적화에 장점이 있다.
단점
가독성, 유지보수성이 떨어진다.
동적 스타일링이 제한적이다.

 

Comments