CSS in JavaScript?
JavaScript를 사용하여 스타일을 선언적이고, 유지보수 가능한 방식이다. JavaScript를 CSS로 전환하는 고성능 컴파일러로 런타임 및 서버 사이드에서 작동하게 된다.
기존 웹 사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, React나 Vue, Angluar와 같은 모던 JavaScript 라이브러리가 인기를 끌고 컴포넌트 기반 개발 방법의 주류가 됨에 따라 한 컴포넌트에서 HTML, CSS, JavaScript를 모두 포함하는 패턴이 많이 사용되고 있다.
여기서 주의할 점은 인라인 스타일과 CSS in JavaScript는 같지 않다는 것.
Inline-style & CSS in JavaScript
inline-style이 동작하는 방법
const textStyles = {
color: white,
backgroundColor: black
}
<p style={textStyles}>inline style!</p>브라우저에서 DOM 노드를 아래와 같이 연결하게 된다.
<p style="color: white; backgrond-color: black;">inline style!</p>CSS in JavaScript가 동작하는 방법
import styled from 'styled-components';
const Text = styled.div`
color: white,
background: black
`
<Text>Hello CSS-in-JS</Text>브라우저에서 DOM 노드를 아래와 같이 연결하게 된다.
<style>
.hash136s21 {
background-color: black;
color: white;
}
</style>
<p class="hash136s21">Hello CSS-in-JS</p>차이점
위의 결과를 보면 차이점이 확연하게 드러난다. CSS in JavaScript는 DOM의 상단에 <style>태그를 추가했고, inline 스타일은 DOM 노드에 속성으로 추가되었다.
이게 왜 중요한 문제일까?
모든 CSS 기능을 JavaScript 이벤트 핸들러로 지정할 수 있는 것은 아니다. 많은 가상 선택자(Pseudo Selector)도 불가능하고 HTML, body태그 등도 지원하지 않는다.
CSS in JavaScript를 이용하면 손쉽게 CSS를 조작할 수 있게 된다. 실제 CSS가 생성되기 때문에 *미디어 쿼리(Media Query) *가상 선택자(Pseudo Selector)도 사용할 수 있게 된다.
Writing your styles in JS ≠ writing inline styles
미디어 쿼리(Media Query) & 가상 선택자(Pseudo Selector)
- 미디어 쿼리(Media Query)
미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용한다. 좁은 화면을 스타일링 한다거나 넓은 화면에 따른 스타일링이 필요할 때 사용된다.
미디어 쿼리
- 가상 선택자(Pseudo Selector)
보통 선택자는 HTML태그 Class, ID 등 HTML요소를 직접적으로 선택하여 CSS를 통해 꾸며주게 된다. 하지만, 가상 선택자(Pseudo Selector)는 HTML요소를 직접적으로 선택하지 않고 요소의 상태에 따라 선택하여 꾸며주는것을 의미한다.
가상 선택자
CSS in JavaScript의 장점과 단점
CSS in JavaScript의 장점
-
컴포넌트로 생각할 수 있다.
CSS의 컴포넌트화로 스타일 시트의 파일을 유지보수 할 필요가 없다. CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화한다.(모듈성) -
분리의 법칙
CSS에는 명시적으로 정의하지 않은 경우, 부모 요소에서 자동으로 상속되는 속성이 있다. 하지만 CSS in JavaScript는 jss-isolate 플러그인 덕분에 JSS(CSS in JavaScript) 규칙은 부모 요소의 속성을 상속하지 않게 된다. -
스코프가 있는 선택자
CSS는 하나의 전역 네임스페이스만 있다. 복잡한 App내에서 선택자의 이름 충돌을 피할 수 없다. JSS(CSS in JavaScript)는 JSON으로 표현된 것을 CSS로 컴파일 할 때, 기본적으로 고유한 이름을 생성한다. -
코드 공유
JavaScript와 CSS사이에 상수와 함수를 쉽게 공유할 수 있다. -
현재 사용중인 스타일만 DOM에 표현
CSS in JavaScript의 단점
-
Learning curve의 발생
초반에는 모르는 개념과 용어가 많아 습득 속도가 느리지만 일정 정도를 넘어서면 습득 속도가 빨라지며 어느 단계를 넘어서면 습득 속도가 느려진다는 문제점. -
새로운 의존성
-
새로운 팀원이 코드베이스에 적응하기 어렵기 된다.
처음 접하는 사람들은 '더'많은 것을 배워야한다.
reference
CSS in JavaScript에 관해 알아야할 모든것
