가수면
스타일 라이브러리 비교 본문
렌더링 성능 | 렌더링 성능 | 런타임 성능 | 유지보수 및 기능 | |
스타일드 컴포넌트 | 장점 컴포넌트를 렌더링 할 때 마다 동적으로 스타일을 생성하고 삽입하기 때문에 매우 유연한 스타일링이 가능하다. 단점 많은 수의 컴포넌트가 빠르게 변경되는 경우 성능에 악영향을 줄 수 있다. |
단점 다양한 기능을 제공하기 때문에 비교적 큰 번들 크기를 가지고 있다. 기존 자바스크립트 실행 단계에서 스타일 계산 및 적용이라는 추가 작업이 발생한다. (<style> 태그로 DOM에 삽입) |
단점 런타임에 스타일을 계산하고 삽입한다. |
장점 요소의 목적을 분명히 할 수 있으며, 가독성과 유지보수 측면에서 좋다. theme을 통해 테마링을 쉽게 할 수 있다. |
테일윈드 CSS | 장점 정적인 스타일 시트를 사용하기 때문에, 스타일 시트가 초기에 한 번만 로드되므로 렌더링 오버헤드가 없다. 단점 동적인 스타일링이 불가능하다. |
장점 빌드 과정에서 미사용 되는 스타일을 제거한다. |
장점 미리 정의된 클래스를 사용하므로 런타임시 성능이 좋다 |
장점 개발 시간 단축과 성능 최적화에 장점이 있다. 단점 가독성, 유지보수성이 떨어진다. 동적 스타일링이 제한적이다. |
'React > React' 카테고리의 다른 글
웹 성능 측정 방법 (0) | 2024.03.11 |
---|---|
리액트 고급 (0) | 2023.07.22 |
메모이제이션 시 초기 렌더링 vs 리렌더링 속도 실험 (0) | 2023.07.07 |
드래그 앤 드롭 구현 (0) | 2023.06.09 |
리액트에서 DOM API를 사용하면 안 되는 이유 (0) | 2023.05.20 |
Comments