Material UI(이하 MUI)의 스타일 솔루션을 사용하기 위해 공식문서를 보았다. MUI는 다른 스타일 솔루션들과 상호 운용이 잘되고, 이와 더불어 CSS-in-JS 솔루션이 MUI의 이전 버전의 한계들을 극복할 수 있고 다른 멋진 기능들을 제공한다고 했다. 그렇기때문에 굳이 자체적 스타일 솔루션을 사용할 필요가 없다고 했다.
In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the component styles, but these approaches have proven to be limited. A CSS-in-JS solution overcomes many of those limitations, and unlocks many great features (theme nesting, dynamic styles, self-support, etc.).
그렇다면 CSS-in-JS라는 스타일 솔루션은 어떤 것일까?
CSS-in-JS
CSS-in-JS 란 말그대로 CSS를 JS에서 작성한다는 것이다. 이전의 웹들은 페이지 단위로 작성이 되었다면 현대의 웹은 컴포넌트 단위로 이루어져있다. 이런 CSS-in-JS 방식은 CSS 모델을 기존위 문서 레벨이 아닌 컴포넌트 레벨에서 생각하고 컴포넌트 처럼 사용할 수 있게 한 것이다. 이는 CSS를 선언적이고 더욱 유지보수가 가능케 한다. 이러한 CSS-in-JS의 동작 방식은 다음의 간단한 예제에서 한번에 이해할 수 있다.
CSS-in-JS 방식의 라이브러리중 하나로 리액트를 사용할 때 많이 사용하는 styled-components (styled-components라는 이름을 그대로 해석해봐도 어떤 식으로 사용 하는지 대충 감이 올 것이다.) 를 사용했다. 각각의 Wraaper와 Title은 CSS-in-JS 방식으로 작성된 컴포넌트이다. 그리고 CSS의 스타일이 적용이 된다. <Wrapper/> 는 background : skyblue, height : 50vh, font-size : 20px 의 property를 갖는 <div/> 태그를 가지는 하나의 '컴포넌트'가 된다. <Title/> 은 마찬가지의 방식으로 컴포넌트가 된다. 보기에도 기존의 문서 방식보다 훨씬 선언적이라는 것을 알 수 있다. 그와 함께 선언적이기 때문에 가독성도 좋아지고 코드를 읽는데 수월해지며 더욱 유지보수하기 쉽다.
인라인 스타일..?
사실 나는 이전까지 인라인 스타일을 거의 대부분 사용했다. 왜냐하면 CSS가 많이 필요한 프로젝트를 한적도 없기 때문에 필요할 때마다 그때 그때 간편하게 사용할 수 있는 인라인 스타일을 사용했었다. 그리고 이 CSS-in-JS 방식의 사용 방법도 언뜻보면 인라인 스타일 같다고 생각했다. 하지만 그 이면을 보면 완전히 다르다는 것을 알 수 있다.
인라인 스타일의 동작 방법
const titleStyles = {
backgroundColor: yellow,
font-size : 2px
}
<h1 style={titleStyles}>inline style!</h1>위와 같은 코드를 JS에 작성했다고 치자. 브라우저에서는 DOM 노드를 다음과 같이 연결한다.
<h1 style="backgroundColor: yellow; font : 2px;">inline style!</h1>
CSS-in-JS의 동작 방법
import styled from 'styled-components';
const Title = styled.h1`
background: yellow,
font-size : 2px
`
<Title>Hello CSS-in-JS</Title>위와 같은 코드를 JS에 작성했다고 치자. 브라우저에서는 DOM 노드를 다음과 같이 연결한다.
<script> 태그를 <head> 태그에 추가하고 거기서 가져다 쓰는 것을 확인 할 수 있다.
차이점은 보다시피 CSS-in-JS는 DOM에 <style> 태그를 추가했고, 인라인 스타일은 DOM 노드에 속성으로 추가했다. 이 차이점은 왜 중요한 것일 까? 모든 CSS 기능을 JavaScript 이벤트 핸들러로 지정할 수 있는 것은 아니다. 하지만 인라인 스타일과 달리 CSS-in-JS는 실제 CSS를 DOM에 생성하기 때문에 미디어 쿼리, pseudo selector, 등등 모든 CSS 를 사용할 수 있다.
다양한 라이브러리
역시 styled components와 JSS 가 현저히 많이 다운로드 된 것을 볼 수 있다. 각 라이브러리 에는 동적 property 사용, 서버 사이드 렌더링, 테마 등 다양한 기능이 제공된다고 한다. 그러므로 나에게 맞는 라이르러리를 잘 찾아 사용하면 될 것 같다.
현대의 웹은 "컴포넌트" 단위로 제작이 되었지만 이전까지의 CSS는 컴포넌트 기반 방식으로 제작되어진 적이 한번도 없었다. 그러한 점을 해결해주는 CSS-in-JS 방식은 CSS도 컴포넌트처럼 생각하고 모듈화 할 수 있도록 하였기에, CSS를 더욱 선언적이고 유지보수가 수월하게 했다. 또한 실제 CSS를 DOM에 생성하는 동작방식 덕에 모든 CSS를 자유자재로 JS에서 사용할 수 있게 되었다.
모든 글 참고 :
[번역] CSS-in-JS에 관해 알아야 할 모든 것
원문: All You Need To Know About CSS-in-JS All You Need To Know About CSS-in-JS - By Please checkout a related story below... hackernoon.com 요약: 컴포넌트로 생각하기— 더이상 스타일시트의 묶음을..
d0gf00t.tistory.com
위 블로그가 해석한 원문 :
hackernoon.com/all-you-need-to-know-about-css-in-js-984a72d48ebc
https://hackernoon.com/all-you-need-to-know-about-css-in-js-984a72d48ebc
hackernoon.com
'TIL' 카테고리의 다른 글
| SCSS(Sass) 사용법 (1) | 2020.10.20 |
|---|---|
| 비동기 처리를 위한 콜백 함수 (0) | 2020.10.14 |
| [Vue 플러그인] vetur (0) | 2020.09.17 |
| [에러 해결] MySQL 서버 접속 불가 (0) | 2020.09.12 |
| 번들러 란 (모듈 번들러, webpack) (0) | 2020.09.03 |