TIL #4 - CSS-in-JS 란?

 

TIL #4 - CSS-in-JS 란?

 

 

 

 

📌 오늘 공부 내용

 

🔱 CSS-in-JS 개념

 

 

📜 목표

• CSS-in-JS 에 대해 이해한다.
• CSS-in-JS 의 장단점에 대해 이해한다.
• CSS-in-JS에는 어떠한 것들이 있는지에 대해 이해한다.

---

 

요즘 CSS를 적용하는 방법으로 CSS-in-JS가 많이 사용된다고 한다.

 

최근에 멘토링 해주셨던 멘토님들도 모두 강조하신게 꼭 CSS-in-JS를 사용해보라 하셨는데, 오늘 이 CSS-in-JS에 대해 정리를 해볼까 한다.

 

 

❓ CSS-in-JS란 

 

CSS-in-JS는 이름 그대로 알 수 있듯이 CSS 파일을 따로 생성하지 않고 JS 파일 내부에 CSS를 정의하는 것입니다.

 

정확히 말하면 JavaScript로 만든 컴포넌트 내부에 CSS를 적용하는 방법이죠.

 

JSX 문법이 HTML과 JavaScript를 같이 사용할 수 있게 만들어진 문법인 것처럼 요즘 추세는 HTML,CSS,JavaScript 파일을 각각 만드는 것이 아닌 컴포넌트를 분리하고 하나의 컴포넌트안에서 HTML, CSS, JavaScript 를 다 같이 사용하는 것입니다.

 

---

 

사실 CSS-in-JS 는 막 낯선 개념같지는 않게 느껴집니다.

 

inline-Style이 생각나시지 않으신가요?

 

하지만, 비교해보면 CSS-in-JS와는 여러 차이점들이 있습니다.

 

우선, 가장 큰 차이점은 inline-Style은 재사용성이 떨어집니다.

 

당연히, 태그 내에 작성하는 style은 재사용하기 어렵겠죠?

 

각 태그마다 서로 다른 style을 정의할 수 있게 되고 이는 곧 프로젝트가 커질수록 유지보수를 하기 어렵게 만듭니다.

 

가독성이 떨어지는 것은 덤이고요.

 

 

보통 그래서 CSS Module 방식을 이용하여 import 하는 식으로 사용을 많이 했었죠. (CSS-in-CSS)

 

하지만, 이 방식의 단점이라면 CSS파일이 많아지게 된다는 점입니다.

 

또한, 해당 페이지에서 필요하지 않은 CSS 파일도 불러온다는 점도 있고요.

 

 

 

---

 

❓ CSS-in-JS의 장단점

 

그렇다고 무작정 CSS-in-JS가 좋으니 무조건 사용해라!!! 이것은 아닙니다.

 

CSS-in-JS가 가지고 있는 장단점에 대해 알고 상황에 맞게 사용하는 것이 중요하죠.

 

 

장점

• 컴포넌트의 라이프 스타일에 맞춰서 동적으로 스타일을 사용 가능하다.
• 컴포넌트가 렌더링 될 때, 스타일 태그도 생성되기 때문에 React 같은 컴포넌트 기반의 프로젝트에서 사용하기 적합하다.
• 재사용성이 높다.
• JS와 CSS의 상태 공유 (자바스크립트 코드 활용 가능)
• 클래스 네임 최소화
• inline-style에서는 사용할 수 없었던 미디어 쿼리, 슈도 선택자를 사용할 수 있음.

 

 

단점

• 별도의 라이브러리 설치 필요. 이는 용량 증가를 불러일으킨다.
• 컴포넌트가 렌더링 될 때마다 스타일 태그가 생성된다는 것은 리렌더링 될 때도 똑같이 동작한다는 것이다. 이는 성능면에서는 좋지 않은 영향을 준다.
• 컴포넌트가 렌더링 될 대 스타일 태그가 생성되므로 렌더링 시 일시적으로 CSS가 적용되지 않은 화면이 나타날 수도 있다. (FOUC)

 

---

 

❓ CSS-in-JS에는 어떠한 것들이 있을까

 

CSS-in-JS에는 어떤 라이브러리들이 있는지 간단히 알아보자.

 

 

◻️ styled-Component

 

 

styled-componets는 CSS-in-JS의 라이브러리중 하나로 React를 주 타겟으로 삼고 있습니다.

 

 npm i styled-components

별도의 라이브러리를 설치하고,

 

import styled from 'styled-components'

 

해당 코드로 컴포넌트에서 import 하여 사용합니다.

 

 

 

 

◻️ emotion

 

 

npm install @emotion/css
npm install @emotion/react

별도의 emotion 라이브러리를 설치하고

 

/** @jsxImportSource @emotion/react */
import { jsx, css } from '@emotion/react';

사용할 컴포넌트에서 import 하여 사용한다.

 

 

참고로 /** @jsxImportSource @emotion/react */  를 빠트리면 안됩니다.

 

이는 주석 역할이 아닌 바벨 트랜스 파일한테 React의 JSX 함수 대신 emotion의 JSX 함수를 사용하라고 알려주는 것이기 때문입니다.

 

 

emotion의 특징은 css props 를 결합할 수 있다는 것입니다.

 

이는 개발자의 역량에 따라 css를 활용도 높게 조합할 수 있게 만들어줍니다.

 

 

 

 

 

---

👨‍💻 마무리

 

원래는 CSS-in-JS의 개념을 위주로 정리해볼려고 했었는데 여러 라이브러리들도 있다는 것을 알게되어 추가적으로 더 작성해보았습니다. 

 

아직 현시점에선 프로젝트에서 제대로 CSS-in-JS를 적용해본적이 없는터라 깊이있는 내용을 전달하기는 어려웠지만, 아무런 개념이 없었던 CSS-in-JS에 대한 개념을 알게 되었고, 기존의 방법과의 차이점들에 대해 공부할 수 있었습니다.

 

지금 하는 팀프로젝트나 개인프로젝트에 적용해서 지금보다 더 깊이 있는 이해를 느껴보고 직접 장단점을 체험해보고 싶은 마음이 생겨서 바로 적용을 해보도록 하겠습니다.