8주차 위클리 페이퍼

Q1) 본인이 생각하는 CSS-in-JS의 장점과 단점을 설명해 주세요.

CSS-in-JS란 자바스크립트 또는 타입스크립트 코드에서 직접 CSS를 작성하여 스타일링 하는 방법을 말한다.

1. 장점

• 지역 스코프 스타일 : 일반 CSS를 작성할 때는 실수로 의도한 것보다 더 광범위하게 스타일을 적용하기가 쉽다. CSS-in-JS는 기본적으로 스타일을 지역 스코프로 지정하기 때문에 이러한 문제를 해결할 수 있다.

• 자바스크립트 변수를 style에 사용할 수 있다. CSS-in-JS를 사용하면 스타일 규칙을 작성할 때 자바스크립트 변수를 참조할 수 있다.

• CSS의 컴포넌트화로 스타일 시트의 파일을 유지보수 할 필요가 없다. CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화한다. (모듈성)

• CSS-in-JS는 자바스크립트 환경을 최대한 활용할 수 있다.

• 자바스크립트와 CSS 사이의 상수와 함수를 쉽게 공유할 수 있다.

• 현재 사용중인 스타일만 DOM에 포함된다.

• CSS-in-JS는 짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 코드 경량화의 장점이 있다.

2. 단점

• CSS-in-JS는 런타임 오버헤드를 더한다. 컴포넌트가 렌더링 될 때 CSS-in-JS 라이브러리는 document에 삽입할 수 있는 일반 CSS로 스타일을 직렬화해야 한다.

• CSS-in-JS는 번들 크기를 늘린다. 사이트를 방문하는 각 사용자는 CSS-in-JS 라이브러리용 자바스크립트를 다운로드 받아야 한다.

• CSS-in-jS는 React DevTools를 어지럽힌다.

• 인터랙션한 페이지일 경우 CSS 파일을 따로 관리하는 방법에 비해 느린 성능을 보여줄 수 있다.