CSS 모듈화

웹 컴포넌트 스타일링 관리 CSS-in-JS vs CSS-in-CSS

[React] CSS모듈화.

에스코어

---

출처 https://www.samsungsds.com/kr/insights/web_component.html

---

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에 비해 느린 속도 등이 있습니다.

출처 https://s-core.co.kr/insight/view/%EC%9B%B9-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81-%EA%B4%80%EB%A6%AC-css-in-js-vs-css-in-css/