[React 기초] CSS-IN-JS

웹 퍼블리싱을 배웠거나, 웹 제작에 관심이 있는 사람이라면 누구든지 아는 웹 퍼블리싱의 "꽃" 바로  CSS 이다. CSS는 마크업 해놓은 html을 꾸며주는 역할을 합니다. 웹 퍼블리셔로 일했던 나는 CSS에 친숙해져 있는 상태였는데, CSS-IN-JS 를 공부하면서 새로운 것을

다시 접한 기분을 느끼고있다.

1. CSS-IN-JS

CSS-in-JS는 스타일 정의를 css 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법 입니다.

기존 웹사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데 (기존 회사에서 사용했던 방식 필자의 전 회사는 php 를 주로 사용하는 회사였다 asp,jsp 사이트도 많이 접해봄), React나 Vue, Angluar와 같은 모던 자바스크립트 라이브러리가 인기를 끌고 컴포넌트 개발 방법의 주류가 됨에 따라 한 컴포넌트에 HTML, CSS, JavaScript를 모두 사용하는 방법을 사용합니다!!

 

2. Emotion

필자가 사용하고 있는 CSS-IN-JS 는 Emotion 인데. 배우는 과정에서 Emotion을 사용했으니 Emotion 위주로 설명을 해보려고 한다!

css-in-js 작성하는 방법!

Emotion의 장점으로는,

 

1. className이 자동으로 부여 되기 때문에 스타일이 겹칠 염려가 없다.
2. props, 조건 등에 따라 스타일을 지정 가능하다.
3. vendor-prefixing, nested selectors, and media queries 등이 적용되어 작성이 간편하다.

처음 Emotion을 접한 날에 기존에 하던 방식대로 가상선택자는 어떻게 사용하지? 라는 부분에 대해서 어려움을 겪었는데, Sass를 사용하던 경험이 있어 우선 try try를 해보았다.

 

이미지 박스에 가상선택자를 두개 사용한 모습

기존에 사용하던 Sass처럼 tree구조로 작성하니 예쁘게 적용된 모습을 볼수 있었음!!!!!

상위의 css-in-js가 입혀진 박스

또한 emotion을 사용하게 되면 태그명도 const 뒤에 선언한 변수명으로 변경하여 사용할 수 있는데, 공통으로 사용될 label이나, title에 주로 사용되는 h1,h2,h3의 공통 font-size 가 입혀질 때 사용하면 아주 유용할 것 같다!