웹 컴포넌트 스타일링 관리 CSS-in-JS, CSS-in-CSS
✨웹 컴포넌트 스타일링 관리 CSS-in-JS, CSS-in-CSS
📘 CSS-in-CSS
기존의 CSS를 사용하여 스타일을 관리하는 방식
- CSS의 전처리기를 사용하여 스타일을 구조화하고 관리
- 가장 대표적인 CSS 전처리기는 Sass(SCSS)
- CSS modules
■ CSS-in-CSS 특징
- 쉬운 사용방법: 기존 CSS를 작성하던 것처럼 스타일을 작성하기 때문에 쉽게 사용할 수 있음
- 변수와 믹스인: 변수와 믹스인을 정의하여 스타일을 구조화할 수 있음
- 중첩규칙: 중첩하여 스타일을 작성할 수 있음
- 파일 분할: CSS 파일을 여러개로 분리하여 작성하고 관리할 수 있음, 필요한 컴포넌트에 필요한 스타일만 적용 가능
■ CSS-in-CSS 단점
- 클래스 이름 충돌: 전역 스코프를 가지고 있기때문에, 클래스 이름이 충돌되면 오버라이딩이 일어남
- 스타일 재사용성이 낮음: 특정 스타일을 여러 컴포넌트에서 재사용하기 어려움
- 스타일 오버라이딩이 어려움: 다른 컴포넌트에서 사용된 스타일을 덮어쓰기 어려울 수 있음, CSS의 우선순위 규칙때문에 발생하는 문제
🔍클래스 이름 충돌을 해결하는 방법
CSS Modules 사용
- 스타일을 모듈화
- 클래스 이름을 로컬스코프로 제한하여, 클래스 이름이 충돌되는 것을 방지할 수 있음
🔍 스타일 재사용성 높이는 방법
- SCSS와 같은 전처리기를 사용한다면 공통적으로 사용되는 스타일을 변수로 작성하고, 필요한 곳에서 재사용할 수 있음
- 접두사(prefix)사용, 클래스 이름에 접두사를 사용하여 고유하게 만들기
header-,footer-,item-등
코드 예시
- 공통적으로 사용되는 스타일을
variables.scss에 작성하고, 필요한 파일에서 재사용
1
2
3
/* variables.scss */
$primary-color: coral;
$background-color: lightgray;
1
2
3
4
5
6
7
8
9
/* footer.style.scss */
@import "variables";
.header {
background-color: $background-color;
h1 {
color: $primary-color;
}
}
1
2
3
4
5
6
7
/* header.style.scss */
@import "variables";
.footer {
background-color: $background-color;
color: $primary-color;
}
■ SCSS 사용한 코드 예시
1
2
3
4
5
6
7
8
9
10
11
import "./header.style.scss";
const Header = () => {
return (
<header>
<h1>📒Book store</h1>
</header>
);
};
export default Header;
1
2
3
4
5
6
7
8
$primary-color: coral;
header {
background-color: gray;
h1 {
color: $primary-color:;
}
}
■ CSS Modules 사용한 코드 예시
1
2
3
4
5
6
7
8
9
10
11
import styles from "./header.style.scss";
const Header = () => {
return (
<header className={styles.header}>
<h1 className={styles.title}>📒Book store</h1>
</header>
);
};
export default Header;
1
2
3
4
5
6
7
8
$primary-color: coral;
.header {
background-color: gray;
.title {
color: $primary-color;
}
}
📘 CSS-in-JS
javascript 내에서 CSS(스타일)을 관리하는 방식
- 컴포넌트 내에서 스타일을 정의하고, 동적으로 적용할 수 있음
- 가장 대표적인 라이브러리는 styled-components, Emotion
■ CSS-in-JS 특징
- 캡슐화: 각 컴포넌트별로 스타일이 캡슐화되어, 다른 컴포넌트에 영향을 주지 않음(오버라이딩X, 클래스 이름 충돌 방지)
- 동적 스타일링: javascript의 동적 기능을 활용하여 동적 스타일링을 적용할 수 있음
- 재사용성: 스타일을 변수화하거나 mixin으로 추상화하여 재사용할 수 있음
- 클래스 이름 최소화
■ CSS-in-JS 단점
- 별도의 라이브러리 설치에 따른 번들 크기 증가
- CSS-in-CSS에 비해 느린 속도: 자바스크립트에서 스타일을 동적으로 계산하고 적용해야하기 때문에 CSS에 비해 더 많은 작업을 해야 함
- 재렌더링 시 스타일 계산: 컴포넌트가 다시 랜더링될 때마다 스타일을 다시 계산하고 적용해야할 수도 있음
- 런타임 오버헤드: 스타일을 동적으로 생성하기 때문에 부하나 지연이 생길 수 있음
- javascript와 css 모두 학습해야 함
■ 스타일드 컴포넌트 사용한 코드 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import styled from "styled-components";
const Header = () => {
return (
<HeaderStyle>
<h1>📒Book store</h1>
</HeaderStyle>
);
};
const HeaderStyle = styled.header`
background-color: ${({ theme }) => theme.color.background};
h1 {
color: ${({ theme }) => theme.color.primary};
}
`;
export default Header;
✨결론 - 선택 기준
- CSS-in-JS는 동적인 스타일링이 필요하거나 컴포넌트 기반의 개발이 주를 이루는 경우
- CSS-in-CSS는 전통적인 웹 개발 방식을 따르는 경우, 혹은 CSS 코드를 별도의 파일로 관리하고 싶은 경우
참고 사이트
This post is licensed under CC BY 4.0 by the author.