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