🐝 정의
CSS 파일을 별도로 작성하지 않고 자바스크립트 파일 안에서 CSS를 작성하는 방식입니다. 자바스크립트 코드가 실행되며 CSS 코드가 생성됩니다.
CSS-in-JS 라이브러리의 종류는 다음과 같습니다.
- Styled-Components
- emotion
- JSS-React
- glamorous
- Radium
- Aphrodite
- etc..
🐝 장단점
CSS-in-JS의 장점은 다음과 같습니다.
- CSS 클래스의 이름 충돌 문제 해결: 스코프를 해당 컴포넌트로 한정하여 전역적으로 인식되는 네임스페이스의 충돌을 방지합니다.
- 컴포넌트 단위의 스타일링: 컴포넌트에 적용될 스타일을 같은 파일 내에서 정의하고 관리할 수 있습니다.
- 동적인 스타일링: props나 state에 따라 상황에 맞는 스타일을 적용할 수 있습니다.
- 자바스크립트를 활용: 자바스크립트가 제공하는 모든 기능(반복문, 함수 등)을 사용할 수 있습니다.
- 서버 사이드 렌더링 지원: 많은 CSS-in-JS 라이브러리가 SSR을 지원하므로 페이지의 초기 로드 속도가 향상됩니다.
CSS-in-JS의 단점은 아래와 같습니다.
- 런타임 오버헤드: 자바스크립트 코드가 실행되며 CSS로 변환되기 때문에 큰 애플리케이션에서는 성능이 저하될 수 있습니다.
- 파일 크기 증가: 자바스크립트 파일에 CSS가 포함되기 때문에 최종 번들 크기가 증가합니다.
- 러닝 커브: 일반적인 CSS 작성 방식과는 차이가 있고, 라이브러리마다 API가 다르기 때문에 새롭게 학습하는 과정에서 시간과 노력이 요구됩니다.
Styled-Component만 사용해 본 초보자인 제가 생각하는 CSS-in-JS의 최대 장점은 CSS 클래스의 이름이 충돌하는 문제를 해결할 수 있다는 점이고, 단점은 러닝 커브가 존재하는 것이라고 생각합니다.
이렇게 CSS-in-JS는 컴포넌트를 기반으로 하는 개발에는 유용하게 사용될 수 있지만, 위에서 본 것과 같은 단점 또한 존재합니다.
따라서 프로젝트의 요구사항과 팀의 기술 수준에 맞게 사용 여부와 라이브러리를 결정하는 것이 중요합니다.
읽어주셔서 감사합니다:)
