CSS-in-JS

개발에서 스타일링은 필수적인 요소입니다. 전통적으로 CSS 파일을 사용하여 스타일을 정의했지만, 최근에는 JavaScript 코드 내에서 직접 스타일을 작성하는 CSS-in-JS 기술이 주목받고 있습니다.

CSS-in-JS란?

CSS-in-JS는 말 그대로 자바스크립트 코드 안에서 CSS 스타일을 직접 작성하는 기술입니다.

기존의 웹 개발 방식에는 CSS를 별도의 파일로 관리했지만, CSS-in-JS는 스타일을 자바스크립트 컴포넌트와 함께 묶어 관리를 합니다.

CSS-in-JS 예시 (styled-components):

다음은 요즘 많이 사용되는 CSS-in-JS 방식중 하나인 styled-componenets 라이브러리를 사용하여 간단한 버튼 컴포넌트를 만드는 예시입니다.

1import styled from 'styled-components';
2
3const Button = styled.button`
4  background-color: #4CAF50;
5  border: none;
6  color: white;
7  padding: 15px 32px;
8  text-align: center;
9  text-decoration: none;
10  display: inline-block;
11  font-size: 16px;
12  border-radius: 5px;
13
14  &:hover {
15    background-color: #3e8e41;
16  }
17`;
18
19function MyButton() {
20  return <Button>Click me!</Button>;
21}
22
23export default MyButton;

위 예시에서 styled.button은 버튼 엘리먼트에 스타일을 입힌 새로운 컴포넌트를 생성합니다. 백틱( ```` )을 사용하여 CSS 스타일을 정의하고, &:hover 와 같은 CSS 선택자를 사용할 수도 있습니다.

CSS-in-JS 장단점

장점:

• 컴포넌트 기반 스타일링: 스타일을 컴포넌트와 함께 관리하여 재사용성을 높이고 유지 보수를 용이하게 합니다
• 스타일 충돌 방지: 고유한 클래스 이름을 자동으로 생성하여 스타일 충돌을 방지합니다
• 동적 스타일링: 자바스크립트의 동적인 기능을 활용하여 조건부 스타일링을 쉽게 구현할 수 있습니다
• 코드 재사용성: 컴포넌트 구조이기 때문에 재사용이 가능하여 개발 효율성을 높일 수 있습니다

단점:

• 런타임 오버헤드: 자바스크립 코드가 실행되며 CSS로 변환이 되므로 큰 프로젝트에서는 성능이 저하될 수 있습니다.
• 러닝 커브: 새로운 스타일 방식을 새롭게 학습하는 과정에서 시간과 노력이 요구됩니다
• 번들 크기 증가: 자바스크립트 파일에 CSS가 포함되기 때문에 최종 번들 크기가 증가합니다