Styled-components는 반영이 느리다?
스타일 컴포넌트는 JS로 CSS를 작성하는 컨셉이다. 즉, 스타일을 컴포넌트와 함께 정의하고 적용하는데 사용한다. 따라서 CSS 스타일링과 다르게 동작하여 브라우저에서 처리할 때 각각의 스타일 컴포넌트를 CSS로 변환하는 작업을 진행하기 때문에 순수 CSS보다 미세하게 반영이 느리다. 따라서 경우에 따라 변환 작업이 지체되어서 마치 깜빡이는 듯한 버그성 경험을 겪을 수 있다.
Styled-components로 작성한 스타일은 브라우저에서 실행되기 전에 CSS로 변환되어야한다. 이 변환 작업은 스타일 컴포넌트가 렌더링되기 전에 발생하며, 스타일 컴포넌트가 렌더링되면 해당 컴포넌트의 스타일이 동적으로 계산된다. 이는 컴포넌트가 화면에 표시되는 동안 발생하며, 이것을 타임 스타일 계산이라고 칭한다. 또한 컴포넌트의 상태나 props의 변화로 재렌더링되면 스타일 컴포넌트의 스타일도 재계산된다.
반영이 느리니까 TailwindCSS?
Tailwind CSS의 경우, 클래스를 사용하여 스타일을 정의하고 적용한다. 이 클래스들은 미리 정의된 스타일 규칙을 나타내며, 각 클래스는 특정 스타일 속성에 대응하기 때문에 스타일을 쉽게 적용할 수 있고 스타일을 일관되게 적용하는데 도움이 된다. 또한 필요한 스타일만을 포함한 작은 크기의 CSS 파일을 생성하기 때문에 불필요한 스타일 규칙이나 코드가 포함되지 않아(내장 기능) 파일 크기가 작고 다운로드 시간이 단축된다. 또한 스타일 시트를 캐싱하여 다음 요청에 대한 로딩 속도를 향상시키며, JIT(Just-In-Time) 컴파일 모드를 지원하여 사용되지 않는 스타일을 런타임에서 제거하고 필요한 스타일만 포함하는 최적화된 스타일 시트를 생성한다.
따라서 접속률이 높은 서비스나 사용자의 경험이 중요한 어플리케이션을 개발 할 때는 스타일드보다는 테일윈드 등을 사용하긴한다. 하지만 최초의 러닝커브와 코드 가독성이 저해되는 협업에 대한 치명적인 단점에 프론트엔드 개발자끼리 호불호가 심하게 갈리는 라이브러리이다.
- 최초의 러닝커브: 어떤 기술이나 도구를 처음 접할 때 사용자가 해당 기술이나 도구를 익히기 위해 필요한 학습이나 습득하는 과정
Utility-First CSS
CSS 설계 방법 중 하나로 CSS 클래스를 미리 정의된 유틸리티 클래스로 구성하고, 이러한 클래스를 HTML 요소에 적용하여 스타일링을 적용하는 방식을 강조하는 방식이다. 주로 CSS 프레임워크 또는 라이브러리로 구현되며, 특히 웹 애플리케이션의 빠른 개발 및 유지보수를 지원하는데 사용된다. Tailwind CSS가 대표적이다.
미리 정의된 클래스
ex. text-center, bg-blue, p-4
단일 클래스 적용
HTML 요소에 단일 클래스만 적용하여 스타일을 적용
원하는 스타일을 나타내며, 다양한 클래스를 조합하여 다양한 스타일을 만들 수 있음
가시성
스타일이 어떻게 적용되는지 명확하게 파악 가능
클래스 이름 자체에서 스타일의 의도를 알 수 있으므로 다른 개발자와 협업할 때 유용
재사용성
미리 정의된 클래스를 반복해서 사용하므로 코드 재사용성이 높아짐
비슷한 스타일을 여러 요소에 쉽게 적용할 수 있음
성능 최적화
클래스 기반의 스타일링을 통해 불필요한 스타일 규칙을 줄일 수 있으므로 페이지 로딩 성능을 최적화하는데 도움이 됨
테마화 및 커스터마이징
테마화 및 사용자 정의가 가능하도록 설계되어 있으며, 프로젝트의 디자인 시스템에 적합하게 조정가능
부트스트랩은 왜 사용하는가?
초보자가 특히 스타일 외 JS를 공부할 때 빠르게 학습하는데 도움이 된다. 현업에서도 정말 바쁘다던가, 급조하지만 스타일은 잘 잡혀있는 프로덕트를 만들어야 할 때 아주 가끔씩 사용하지만 지양한다.
CSS 파일이 너무 많아서 불편하다
리액트는 작은 페이지 조각을 모아 하나의 페이지로 만들어내는, 컴포넌트 단위로 페이지를 구성하자는 컨셉이다. 따라서 폴더나 파일을 나눌 때에도 목적에 맞게 구성하게 된다. css 시트가 많아지는 것처럼 스타일드 컴포넌트도 결국 컴포넌트의 단위로 목적이 묶이므로, 나중에는 스타일드 컴포넌트만을 위한 폴더나, 파일을 구성해야할 때가 필연적으로 온다. 지금 당장은 한 파일에 관리한거지만, 여러개의 컴포넌트가 컴포넌트에 묶이는 등으로 구성되는 경우 코드가 매우 많아질 수밖에 없다.
결국 하나의 파일에서 로직과 화면 구성을 모두 작성해버리면 유지보수가 매우 어려워지기 때문에 결국 스타일드 컴포넌트도 styled 라는 분류로 따로 빼어 관리하게 되기 때문에 CSS의 대응으로 Style-component를 선택한 것은 큰 의의가 없다.
사실 라이브러리 사용에 정답은 없다. 그때 그때 개발자가 어떤 서비스, 기능, 대상을 바라보고 있는지에 따라 결정하는 것이다.
우선 배우고, 실제 서비스를 다룰 시점에 서비스의 특성을 고려해서 최적의 스타일 라이브러리를 찾아나가는 과정을 거치자.
Reference
엘리스 AI 8기 1차 프로젝트 피드백
