CSS 모듈화
웹 컴포넌트 스타일링 관리 CSS-in-JS vs CSS-in-CSS
웹 컴포넌트 스타일링 관리 CSS-in-JS vs CSS-in-CSS
www.samsungsds.com
[React] CSS모듈화.
리액트에서 CSS 적용하는 방법은 크게 2가지가 있다. 1. style.css 등을 만들어서 각 컴포넌트의 스타일링을 하고 import해오기 2. 해당 컴포넌트 안에서 property 적용하기 하지만, 위 2가지 방법 모두 코
codingbucks.tistory.com
에스코어
에스코어는 디지털 혁신을 위한 고급 프로페셔널 서비스를 제공합니다. 매니지먼트 컨설팅과 소프트웨어 테크놀로지 서비스 오퍼링을 살펴보세요.
s-core.co.kr
CSS-in-CSS
React에서 CSS를 적용하는 방법
1) style.css와 같이 css 파일(.css)을 생성하여 각 컴포넌트의 스타일링을 작성하고 import 해오기
(Next.js 같은 경우 > _app.js 최상단에 css 파일(.css)을 import 해온다.)
2) 스타일을 적용하고자 하는 컴포넌트 안에서 property 적용하기
위 두가지 방법 모두 코드양이 많아져 가독성이 떨어지고, 중복되는 클래스가 생길 경우 서로 다른 컴포넌트에도 영향을 미칠 수 있는 단점이 있습니다.
CSS 모듈화를 이용하는 이유
: 여러 컴포넌트를 만들고 그에 맞춰 CSS를 작성하다 보면 className이 겹치는 경우가 생길 수밖에 없다.
className이 같다면 개발자가 원하는 한 컴포넌트에만 스타일이 적용되는 게 아니라 같은 clasName을 가지고 있는 다른 컴포넌트에도 영향을 미칠 수 있습니다.
이러한 현상을 방지하기 위해 CSS를 모듈화하고, React(or Next.js)에서 자동으로 className을 생성하기 때문에 독립적인 컴포넌트를 만들 수 있게 됩니다.
CSS-in-JS
: 가장 대표적으로는 styled-components를 사용하는 방법이 있습니다.
이를 사용 했을 때 장점으로는
- CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화하는 모듈성을 지닐 수 있습니다.
- JavaScript 환경을 최대한 활용 할 수 있습니다.
- 자바스크립트와 CSS 사이의 상수와 함수를 공유 할 수 있습니다.
- 현재 사용 중인 스타일만 DOM에 포함 할 수 있습니다.
- 짧은 길이의 유니크한 클래스를 자동으로 생성하는 코드 경량화를 할 수 있습니다.
단점으로는
- 러닝 커브
- 새로운 의조성 발생
- 별도의 라이브러리 설치에 따른 번들 크기 증대 및 CSS-in-CSS에 비해 느린 속도 등이 있습니다.
