CSS in JS의 장점 (feat. styled-components)

유환익·2021년 12월 26일
1

CSS in JS

JS 파일이 CSS 요소를 생성하는 방식의 스타일링 방법론은 다음과 같은 장점을 가진다.

  • 파일을 분리하지 않고 스타일링을 적용함으로써, 더 빠른 성능 효율성을 가진다. JS 파일만 다운로드하면, css 스타일링 또한 같이 받아오기 때문이다.
  • css 스타일의 속성이 관련있는 컴포넌트에만 영향을 미치도록 스코프를 한정할 수 있다.
    같은 css 파일이 다른 html 요소에 원하지 않는 영향을 주는 것을 막을 수 있다. (이는 css 파일의 선택자가 share-naming이라는 특성을 가지고 있기 때문이다.)
  • 기존의 scss 문법에서 특정 css 요소가 어느 부모로 부터 nested 되었는지 파악하지 않아도, 바로 해당 컴포넌트를 cmd + click하여 스타일을 특정하여 찾을 수 있다.

새로운 기술을 적용할 때에는, 그 기술이 해결할 수 있는 문제점에 먼저 포커스를 맞추어라

신기술이라고 모두 다 좋은 점만을 가지고 있지 않다. 모든 기술에는 장점과 단점이 극명하게 있는 편이다. 새로운 기술을 맞이 했을 때에는 바로 호불호를 속단하지 않고 이 기술이 가진 장점과 단점에 더 집중하는 태도가 더 좋다. 만약 신기술이 현재 풀어야 하는 문제에 더 복잡성을 더한다면 다른 기술을 활용하는 것이 좋고, 반대라면 그 신기술을 적용하는 것이 문제를 해결할 키가 될 것이다.

profile
사용자의 편의를 더 생각하고 편안한 UI/UX 개발을 꿈꾸는 프론트엔드 개발자 지망생입니다.

0개의 댓글