styled components

 

styled components란?

styled components란 JavaScript와 CSS의 능력을 결합한 CSS in JS 라이브러리이다.

styled components는 CSS를 JavaScript를 통해 집어넣어 유동적인 스타일링을 할 수 있다.

 

기존의 CSS 방식은 파일을 별도로 분리하고, id나 class 이름을 통해 가져와 사용했지만

styled components의 경우 한 파일 내에서 컴포넌트 이름을 사용하듯 스타일링을 진행한다.

 

 

CSS in JS 

CSS in JS는 CSS를 JavaScript 코드 내에 포함하는 방식이다.

 

CSS in JS 방식으로 작성된 스타일링 코드에는 컴포넌트마다 고유한 class name이 적용된다.

이 class name은 브라우저 런타임에서 각 컴포넌트의 스타일을 식별하는 역할을 한다.

이때, class name은 사용자가 지정한 CSS 클래스 네임과 충돌하지 않도록 랜덤한 문자열로 생성된다.

 

예를 들어 styled components를 사용한 아래 ProductContainer 컴포넌트가 렌더링 되면 고유한 class name이 적용된다.

해당 예시는 아래와 같이 ecUzFG라는 class name이 부여되었다.

 

이렇게 생성된 class name은 컴포넌트가 mount 될 때 HTML head 태그 안의 style 태그에 자동으로 추가되어 스타일링이 적용된다.

또한, 컴포넌트가 unmount 될 때 해당 class name도 함께 제거된다.

 

CSS in JS 방식은 여러 장점이 있다.

• 컴포넌트 스타일링과 HTML 마크업이 함께 있어, UI의 복잡도가 높아져도 CSS를 쉽게 찾을 수 있다.
• 클래스 이름 충돌이 없어 전역 네임 스페이스를 사용하지 않아도 된다.
• 동적인 스타일링이 가능해져서 조건부 렌더링 등 사용성이 개선된다.
• 같은 컴포넌트가 여러 번 렌더링 된다 하더라도, 하나의 스타일링 코드만 사용되어 최적화가 적용된다.
• CSS in JS 라이브러리에 따라 자동으로 벤더 프리픽싱을 처리해준다.

 

 

styled components의 장점

• 스타일링 코드가 컴포넌트 내부에 있어 코드의 가독성이 높아지고 유지보수성을 높여준다.
• props를 통해 동적으로 스타일링을 변경할 수 있어, 쉽게 테마 또는 스타일 변경 기능을 추가할 수 있다.

 

 

styled components의 단점

• 러닝 커브가 있다.
• 별도의 라이브러리 설치로 인해 번들 크기가 커진다.
• 런타임에 CSS 스타일 코드를 생성하므로 상대적으로 로딩 속도가 느리다.