CSS-in-JS의 장점과 단점

 

 

 

CSS-in-JS는 스타일을 JavaScript 코드 내에 작성하는 기법으로, React와 같은 현대적인 프론트엔드 프레임워크에서 많이 사용됩니다. 이 기법은 여러 라이브러리(예: styled-components, Emotion, JSS)를 통해 구현할 수 있습니다. CSS-in-JS의 장점과 단점을 아래에 정리했습니다.

 

장점

1. Scoped Styling (범위 제한 스타일링):
   • 스타일이 컴포넌트에 국한되어 적용되므로 스타일 충돌을 피할 수 있습니다. 각 컴포넌트는 고유한 클래스 이름을 가지게 됩니다.
2. Dynamic Styling (동적 스타일링):
   • JavaScript의 모든 기능을 활용하여 조건부 스타일링 및 동적 스타일링이 가능합니다. 예를 들어, 컴포넌트의 props에 따라 스타일을 변경할 수 있습니다.
3. Code Co-location (코드 병치):
   • 컴포넌트의 로직과 스타일을 한 파일에 함께 작성할 수 있어, 특정 컴포넌트와 관련된 모든 코드를 쉽게 찾고 관리할 수 있습니다.
4. Enhanced Maintainability (향상된 유지보수성):
   • 스타일과 관련된 모든 로직이 컴포넌트 내부에 있기 때문에, 스타일 변경이 필요한 경우 해당 컴포넌트에서만 수정하면 됩니다.
5. SSR (서버사이드 렌더링) 지원:
   • 많은 CSS-in-JS 라이브러리는 서버사이드 렌더링을 지원하여 초기 페이지 로드 시 스타일이 포함된 상태로 렌더링되도록 합니다.
6. Automatic Vendor Prefixing (자동 벤더 접두사):
   • CSS-in-JS 라이브러리는 벤더 접두사를 자동으로 추가해 주므로, 브라우저 호환성 문제를 걱정할 필요가 줄어듭니다.

 

단점

1. Performance Overhead (성능 오버헤드):
   • 런타임에 스타일을 계산하고 적용해야 하기 때문에 성능 오버헤드가 발생할 수 있습니다. 특히 많은 컴포넌트가 동적으로 스타일링될 경우, 성능 이슈가 생길 수 있습니다.
2. Larger Bundle Size (더 큰 번들 크기):
   • CSS와 JavaScript를 함께 번들링하기 때문에, 최종 번들 크기가 커질 수 있습니다. 이는 페이지 로드 시간을 증가시킬 수 있습니다.
3. Learning Curve (학습 곡선):
   • 기존 CSS 작성 방식에 익숙한 개발자들에게는 CSS-in-JS 패턴이 익숙하지 않을 수 있습니다. 새로운 개념과 라이브러리를 배우는 데 시간이 필요할 수 있습니다.
4. Tooling and Ecosystem (도구와 생태계):
   • CSS-in-JS는 특정 라이브러리에 종속적이므로, 해당 라이브러리가 계속 유지보수되고 있는지 확인해야 합니다. 또한, 기존의 CSS 전처리기나 도구와의 호환성 문제가 있을 수 있습니다.
5. Global Styles Management (전역 스타일 관리):
   • CSS-in-JS는 컴포넌트 단위의 스타일링에 적합하지만, 전역 스타일이나 테마 관리는 다소 번거로울 수 있습니다. 이를 해결하기 위한 추가적인 설정이 필요할 수 있습니다.

 

결론

CSS-in-JS는 컴포넌트 중심의 스타일링을 효과적으로 제공하며, 특히 동적 스타일링이 필요한 상황에서 유용합니다. 그러나 성능과 번들 크기, 학습 곡선 등의 단점을 고려해야 합니다. 프로젝트의 성격과 팀의 기술 스택에 따라 CSS-in-JS를 도입할지 여부를 결정하는 것이 좋습니다.