[개발일기] css-in-js 정리

오늘은 CSS-in-JS가 무엇인지 정리해 보려고 합니다!

💚 CSS-in-JS

스타일 정의를 javascript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법
css 모델을 문서레벨이 아닌 컴포넌트 레벨로 추상화(모듈성)

CSS-in-JS는 javascript와 css사이 상수와 함수 공유가 쉽게 할 수 있어요!

아래 예시는 CSS-in-JS 에 대표적인 방식 중 하나인 styled-components 를 사용하여 스타일링 한 코드입니다.

const Button = styled.div `
   background-color : ${(props) => (props.color ? '#c4c4c4' : 'transparent')};
   border-radius : 16px;
   padding : 10px;
`

CSS-in-JS 를 사용했을 때에는 좋은 점도 있지만 아래와 같은 문제가 있을 수 있어요.

1) bundle 크기 문제

styled-components와 같이 별도의 라이브러리를 설치하여 사용하면 bundle크기가 커지게 되는데요! bundle크기가 클수록 초기 진입시간이 느려지는 문제가 발생할 수 있습니다.

별도의 라이브러리 설치로 인해 bundle이 커지는 문제가 있다. bundle 크기가 커지면 초기 진입 시간이 느려지기 때문

2) 늦은 인터렉션

javascript코드가 모두 로딩된 후에 css 코드가 생성되는데요! 이렇기 때문에 css파일을 따로 사용하는 방법보다 성능이 느리다는 단점이 있습니다.

다음에는 CSS-in-CSS를 정리해보도록 하겠습니다!