자바스크립트에 CSS를 넣지 말아야 하는 이유

자바스크립트 안의 CSS란

말 그대로 반응요소인 자바스크립트나 타입스크립트에 직접 스타일을 넣는 것이다. 

리액트 커뮤니티에서 스타일컴포넌트와 이모션은 가장 인기있는 자바스크리브속 CSS 라이브러리이다.

 

자바스크립트 안의 CSS의 장점,단점,불편한점

상세한 자바스크립트 안의 CSS 패턴과 성과의 결과를 보기 전에, 한 단계 더 높은 차원의 요약을 해 보자.

 

장점

한정된 영역의 스타일

플레인 CSS를 작성할 때, 의도한 것 보다 더 넓은 영역에 스타일을 적용하기 쉽다. 

 

동일선상배치

플레인CSS를 사용한다면,모든 리액트 컴포넌트가 src/components에 있는 동안 src/styles 디렉토리에 css파일을 넣을지도 모른다. 

어플리케이션의 크기가 커짐에 따라, 각 컴포넌트들이 어떻게 쓰였는지 말하기 어려워진다.스타일이 그런 식으로 사용되는 것은 쉬운 방식이 아니기 때문에 종종 CSS에서 죽은 코드가 되기도 한다. 

코드작성의 더 나은 접근 방법은 동일선상에 각각의 컴포넌트를 모두 연결시켜 포함하는 것이다. 이것을 동일선상배치라고 한다. 

문제는 CSS와 자바스크립트가 분리된 파일에 있을 때, 플레인 CSS를 썼을 때 동일선상에서 작동하게 하기가 어렵다는 것이다. 스타일은 css파일이 어디에 있든 적용될 것이다. 반면에, 자바스크립트 안에 CSS를 썼을 때, 리액트 컴포넌트 안에 스타일을 직접 작성할 수 있다.

정확하게 썼다면, 어플리케이션의 유지하는 능력을 향상시킬 것이다.

 

스타일 내에서 자바스크립트 변형

자바스크립트 내에 쓴 CSS는 스타일 가이드 내에서 변형가능한 자바스크립트를 참고할 수 있다.

 

단점

스타일 내에서 자바스크립트는 러닝 타임이 과하다.

컴포넌트가 렌더 될 때, 스타일내의 자바스크립트 라이브러리는 파일에 넣기 위해 플레인 CSS로 스타일을 연속시킨다.

이는 여분의 CPU 사이클을 더 소모시키는 것이 분명하다. 그러나 이것이 어플리케이션에 가공할만한 영향을 주기에는 충분한가?

 

스타일 내의 자바스크립트는 큰 사이즈를 만들어낸다.

확실한 것은 사이트에 방문하는 유저들이 스타일내의 자바스크립트 라이브러리를 자바스크립트로 다운받을 수 있다. 이모션은 7.9kb로 압축되어 있고 스타일 요소들은 12.7kb이다. 그래서 라이브러리가 크지 않다면, 모두 합쳐질 것이다.

 

스타일 내의 자바스크립트는 리액트 개발 툴을 복잡하게 한다.

css로 사용된 각 요소들과 이모션은 <emotioncsspropinternal>과<삽입>요소로 렌더 될 것이다. 많은 요소를 css로 사용했다면, 이모션의 내부 요소들은 정말로 리액트 개발 툴을 복잡하게 만들 수 있다.

 

 

 

 

참고

https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b

Why We're Breaking Up with CSS-in-JS