Why We're Breaking Up with CSS-in-JS
DEV Community
CSS-in-JS 의 대안 (Css-in-CSS + Tailwind)
제가 처음 웹개발을 시작할때만 해도 HTML 문서에서, 순수하게 CSS 로 작업을 했었는데요.
프론트엔드 개발 환경이 발전하면서 CSS 도 프로그래밍 스럽게 관리할수 있는 CSS 모듈을 활용한 전처리기 Pre-Processor (sass, less) 가 인기를 얻었습니다. 그러다가 컴포넌트 개발 방식이 도입 되면서 최근에는 많은 프로젝트 에서 emotion 이나 styled-components 같은 CSS-in-JS 를 많이 사용하고 있는데요.
CSS-in-JS 는 자바스크립트로 CSS 를 관리할수 있습니다. JSX 는 마크업과 스크립트 를 동시에 작성할수 있게 하여서 '컴포넌트' 유닛으로 관심사를 분리하였는데요. CSS-in-JS 는 JSX 에 더해서 CSS 까지 포함할수 있게 해줍니다. (JSX + C? 흠.. 적다보니 vue 스럽기도 하군요)
CSS in JS 는 어떤 장단점이 있을까요?
장점.
1. Locally-scoped styles(좁은 지역 범위 스타일) : CSS 는 전역적으로 관리 되어서 중복 적용 되어 실수할 가능성이 큽니다. 이를 해결하기 위해 더 긴 클래스 이름이나 구체적인 css selector 를 사용해야 하는데요. 이는 개발자의 몫이고 어렵지는 않지만 조금 번잡스러울수 있습니다. 하지만 Css-in-JS 는 Local 범위로 구성이 되기 때문에 이러한 문제를 해결해줍니다.
2. Co-location: 코드를 구성하는좋은 방법중 하나는, 단일 구성 요소와 관련된 파일을 같은 위치에 포함하는 것입니다. CSS 는 위치에 관계없이 전역적으로 적용 되기 때문에 Co-location 을 구현하기 어렵습니다. CSS-in-JS 는, JavaScript 로 관리 되기 때문에 컴포넌트 레벨에서 모듈화가 가능합니다.
3. Sharing Constants: JavaScript 와 CSS 간에 상태나 함수 공유가 가능합니다.
4. Dead Code Elimination: JavaScript 로 개발하기 때문에, 미사용 코드 검출 용이 합니다. CSS 는 사용되지 않는 코드를 검출 하지 못합니다.
5. HTML, CSS, JavaScript 와 같이 커다란 단위의 목적을 기준으로의 분리가 아닌, 스타일을 포함한 컴포넌트 단위로 분리가 가능합니다.
단점.
1. Runtime overhead: 자바스크립트 해석 과정이 필요하기 때문에, CSS 로 변환되고 Document 에 삽입 되면서 추가적인 CPU 를 사용합니다.
2. 번들 사이즈 증가: CSS-in-JS 를 사용하려면 해당 라이브러리를 다운로드 해야 하며 이는 런타임 bundle 사이즈의 증가를 의미합니다.
3. Clutters React DevTools: 각각의 CSS-in-JS 속성들이 ReactDevTool 에 포함됨으로써, 디버깅 가독성을 저하 시킵니다.
4. 느린 렌더링 속도: CSS-in-JS 는 렌더링되는 구성요소가 굉장히 많고, 런타임에 스타일을 생성하기 위한 동작이 일어납니다. 국, 내외 여러 블로그 글을 참고 해보면 CSS-in-CSS 보다 약 50% 정도 더 느린걸로 보입니다.
최근에는 이러한 단점들 때문에 CSS-in-CSS (scss) + 유틸리티 클래스(Tailwind, Bootstrap) 의 도입도 논의되고 있습니다. CSS-in-JS 의 이점을 유지하면서도 일반 CSS 와 유사한 성능을 가진 스타일링 시스템을 어느정도는 구축할수 있다고 합니다.
모든 기술에는 장단점이 있습니다. 이러한 장단점을 명확히 인지하고 라이브러리가 넘쳐나는 웹개발 환경에서 프로젝트에 적합한 적정 기술을 선택 하는 것도 모던 엔지니어의 능력중 하나인것 같습니다.
다음 내용이 궁금하다면?
이미 회원이신가요?
2022년 10월 22일 오전 7:19
댓글 5
A pattern for creating component-scoped CSS in JavaScript is called CSS-in-JS. It's crucial to understand that CSS-in-JS is an authoring tool that enables you to use various libraries rather than a framework. https://fnfgame.co/
CSS-in-JS refers to a design approach that can be used in JavaScript to generate style sheets that are localized to specific components. Keep in mind that CSS-in-JS is not a framework, but rather an authoring tool that facilitates the use of many libraries. https://wordletoday.io/
CSS-in-JS는 JavaScript 안에서 CSS를 작성하고 관리하는 방식을 말합니다. 이러한 방식은 몇 가지 이점을 제공하지만, https://wordhurdle.co/snow-rider-3d 때로는 다른 대안을 찾을 수 있습니다. CSS-in-CSS와 Tailwind CSS는 CSS-in-JS를 대체할 수 있는 몇 가지 대안적인 방법입니다.
A very important advantage of CSS-in-JS is that it helps to avoid conflicts and unwanted style overlaps. The modularity that this approach provides makes the code more predictable and easier to maintain. https://ragdollhitgame.com
CSS-in-JS는 스타일링을 컴포넌트와 함께 로컬 범위에서 관리할 수 있어 스타일 충돌을 방지하고 코드 가독성을 높이는 장점이 있습니다. JavaScript와 CSS 간 상태 공유와 Dead Code Elimination을 지원해 효율적인 관리가 가능하지만, 런타임 오버헤드와 번들 크기 증가가 단점으로 지적됩니다. 또한, 디버깅 시 React DevTools의 가독성이 떨어질 수 있으며, 렌더링 속도가 느려질 우려가 있습니다. 최근에는 CSS-in-CSS와 Tailwind 같은 유틸리티 클래스를 결합해 CSS-in-JS의 장점을 유지하면서도 성능 문제를 완화하는 방식이 주목받고 있습니다. 프로젝트 특성과 요구에 따라 적합한 기술을 선택하는 것이 중요합니다. https://mortalkombat3.net
함께 읽은 게시물
< 🔔 내가 만나본 빠르게 성장하는 주니어 개발자들의 특징 >
본론에 앞서 이 글은 그동안 제가 만나본 성장이 빠르다고 느낀 주니어 개발자분들의 태도와 습관을 정리해보는 글입니다.
기술이나 학습등을 거론하며 '이런것만 배우면 당신도 빠르게 성장할 수 있습니다!' 류의 글은 아니고 그분들의 이런 태도와 습관이 성장에 영향이 있지 않았을까 정도의 글이라고 생각해주시면 되겠습니다.
✅️ 질문을 잘한다.
빠르게 성장하신 분들의 질문엔 2가지 공통점이 있었다.
1. 질문의 타이밍
대부분의 신입사원이나 주니어 개발자분들은 선배 개발자에게 질문을 하기 부담스러워 한다. 그래서 혼자 몇일을 끙끙거리다가 힘겹게 질문하거나 선배 개발자가 먼저 말을 걸어서 답을 얻는 모습을 많이 본다.
만약 알고싶던 내용이 선배 개발자가 바로 대답해줄 수 있는 것이었다면 오래 끙끙거린만큼 시간을 허비해버린것과 같다.
질문을 잘하는 분들의 경우 자신들의 고민이 자신이 풀수 없는 수준이라는걸 알게 되면 선배 개발자들에게 바로 질문함으로써 그만큼 시간을 아끼고 다음 스텝으로 나아간다.
2. 질문의 깊이
질문할 때 '이게 뭐에요?' 나 'A 부터 Z 까지 알려주세요' 등의 질문을 하지 않는다.
자신이 충분히 찾아보고 자신의 선에서 최대한 알아본 뒤에 풀리지 않는 부분을 질문한다. 그렇기에 질문의 깊이가 깊다.
이런 질문을 받았을 때 바로 답을 주는 경우도 있지만 대부분 이런 깊이 있는 질문은 정확한 확인을 위해 다시 한번 관련 내용을 찾아보게 만든다.
이로 인해 질문 받는 사람도 알고 있던 내용을 복습하거나 놓쳤던 부분을 공부하게 되고 이를 통해 같이 성장하는 느낌을 받는다. 그래서 나는 이런식으로 질문 하는 분들이 좋고 나도 다른 사람들한테 이렇게 질문을 하기 위해 노력한다.
✅️ 가만히 있지 않는다.
간혹 내 업무가 많이 밀리고 바쁘다보면 주니어 분들을 신경쓰지 못해 그분들의 업무에 공백이 생길때가 있다. 업무를 잘하시는 주니어 분들은 이런 공백도 허투루 지나가지 않고 아래와 같은 행동들을 한다.
1. 업무 혹은 과제를 달라고 요청한다.
2. 팀에서 진행하는 프로젝트에 이슈가 없는지 찾아본다. 혹은 발견된 이슈의 원인을 파악해보려고 한다.
3. 팀에서 진행하는 프로젝트 코드를 분석한다.
4. 팀에서 사용하는 오픈소스나 프레임워크, 라이브러리 코드를 분석한다.
5. 프... 더 보기
Longest Common Subsequence 자바스크립트 풀이
코
... 더 보기
