css-in-js 란 무엇인가 ?

지금까지는 css 를 사용할때 css 파일을 만들어서 컴포넌트에서 풀러다가 사용을했었다.(클래스네임을 이용해서)

 

styled-component 랑 emotion 을 사용해보려고 하는데 

 

왜 이렇게 해야하는가라는 생각이 들어서 찾아봤다.

 

• Global namespace: => class명이 build time에 유니크한 해시값으로 변경되기 때문에 별도의 명명 규칙이 필요하지 않다.
• Dependencies: => CSS가 컴포넌트 단위로 추상화되기 때문에 CSS 파일(모듈)간에 의존성을 신경 쓰지 않아도 된다.
• Dead Code Elimination: => 컴포넌트와 CSS가 동일한 구조로 관리되므로 수정 및 삭제가 용이하다.
• Minification: => 네임스페이스 충돌을 막기위해 BEM 같은 방법론을 사용하면 class 명이 길어질 수 있지만, CSS-in-JS는 짧은 길이의 유니크한 클래스를 자동으로 생성한다.
• Sharing Constants: => CSS 코드를 JS에 작성하므로 컴포넌트의 상태에 따른 동적 코딩이 가능하다.
• Non-deterministic Resolution: => CSS가 컴포넌트 스코프에서만 적용되기 때문에 우선순위에 따른 문제가 발생하지 않는다.
• Isolation: => CSS가 JS와 결합해 있기 때문에 상속에 관한 문제를 신경 쓰지 않아도 된다.

대충 구역이 한정되서 수정에 용이하고 naming 에 부담이 적어지는 것이 장점이고

단점으로는 인터렉티브한 웹페이지를 만들경우 속도문제가 있을수 있다는 점이였다.

 

출처 :blueshw.github.io/2020/09/14/why-css-in-css/