실무에서는 각기 다른 프로젝트에 scss 와 Css in js 를 둘다 사용한다.
알고 모르고의 차이가 엄청난 업무 효율의 차이를 가져온다.
어렴풋이 알고만 있고 설명할 수 없다면 그것은 지식이 아니기 때문에
(의식의 흐름대로 이해해본) scss 와 css in js 에 대한 포스팅을 올려보게 되었다.
문득 면접 질문들 중에 렌더 과정에 대한 질문이 생각났다.
당시에는 면접용으로 달달 외우듯이 공부했었지만
실무에서 한 모먼트씩 떠오르며 기초체력을 바탕으로 추진력과 인사이트를 얻었던 계기가 되었다.
더 추가되는 지식이 있으면 계속 업데이트해볼 생각이다
CSS - Scss vs Css in Js 의 동작방식 비교하기
SCSS
cssom 트리를 그리기 위해서는 css 파일을 읽어야 한다.
기존의 css 파일은 좀 구렸다. 변수, 중첩, 믹스인, 상속 등의 개념을 적용할 수 없어 불필요한 중복, 남발이 비일비재 해졌기 때문이다.
그래서 scss 와 같은 css 전처리기(css pre-processor) 가 등장했다.
상속이나 믹스인 등의 기능들을 추가해서 scss 파일로 구현해놓으면, 빌드시에 scss 를 → css 로 컴파일 해서 내보내준다.
$primary-color: #3498db;
body {
font-family: 'Arial, sans-serif';
color: $primary-color;
.header {
background-color: darken($primary-color, 10%);
}
}
CSS in Js
시간이 지나면서 SPA(Single Page Application) 을 사용하여 컴포넌트 기반의 개발 방식으로 바뀌게 된다.
컴포넌트 별로 스타일을 관리하고 동적인 요소들이 추가되면서 js 기반으로 스타일링을 하는 css in js 가 등장하게 되었다.
이친구는 js 런타임에 style 을 가져와 적용하게 되고,
만약 규모가 크다면, js를 한방에 가져와 느려지기 때문에 성능 고려가 필요하다는 단점이 있다.
런타임을 돌면서 난수화된 고유 클래스명을 생성하고,
그 클래스 명을 통해 <head> 안의 <style> 태그에 스타일이 적용된다.
// styled-components 선언부
const Button = styled.button`
background-color: ${props => props.primary ? 'blue' : 'gray'};
color: white;
`;
// 위에서 선언한 스타일이 동적으로 <style> 태그에 삽입된다
<style>
.Button__sc-12345abc {
background-color: blue;
color: white;
}
</style>
// 컴포넌트에는 유니크 클래스명이 추가된다
<button className="Button__sc-12345abc">Primary Button</button>'JavaScript' 카테고리의 다른 글
| Network - Cache 그리고 Cache-Control (5) | 2024.11.14 |
|---|---|
| HTML - 공식문서 1.7 Desige notes (0) | 2024.08.19 |
| JavaScript - async / defer 스크립트 속성 (feat. kakao sdk 로컬 에러) (0) | 2024.07.15 |
| 알고리즘 - 퀵 정렬(Quick Sort) (0) | 2024.06.09 |
| 알고리즘 - 이진 탐색 (0) | 2024.05.19 |
댓글