styled-components

이지우·2023년 8월 17일

프론트엔드

목록 보기

3/7

Styled-components

컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리
CSS in JS 기술로, JS내에 CSS를 작성하는 라이브러리
className 기반
CSS파이링 아닌 JS로 작성된 컴포넌트에 바로 삽입하는 스타일 기법
클래스명을 해시값으로 자동 생성, 클래스명 오염 방지
자바스크립트의 동적인 값들을 온전하게 사용이 가능
변수에 따라서 스타일을 바꿀 수 있는 장점을 가짐
연산자(&&, || 등)를 이용해서 스타일을 적용 가능
자주 사용하는 css를 관리하기 위해 css props를 사용
GlobalStyle과 ThemeProvider를 사용하여 전역으로 사용할 요소들을 쉽게 정의 가능

import {createGloabalStyle} from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
	${reset}
    
    // 전역 스타일
    
`;

export default GloabalStyle;

코드 가독성을 위해 컴포넌트를 먼저 선언하고 하단에 작성
Template Literal을 사용하여 작성하며, const 컴포넌트명 = styled.태그명으로 이루어져 있음 (스타일 상속: const 컴포넌트명 = styled(스타일컴포넌트명))

사용이유

컴포넌트가 많을 경우
1. class 중복으로 생성
2. 다른 컴포넌트에 원하지 않는 스타일이 적용
3. css파일이 너무 길어져서 수정이 어려움
-> 컴포넌트 제작시 라이브러리를 이용하여 js파일에서 스타일을 바로 입힘(컴포넌트마다 고유한 클래스를 가짐)

장점

Scss라이브러리 설치 없이 Scss 문법 사용 가능
자유로운 CSS 커스텀 컴포넌트 생성
컴포넌트의 props를 참조할 수 있으며, props의 값에 따라 스타일을 다르게 코딩 가능
className을 스스로 생성하기에 className의 중복이나 오타로 인한 버그를 줄여준다
모든 스타일 속성이 특정 컴포넌트와 연결되어 있기에 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제된다
className을 일일이 수동으로 관리할 필요 없이 React의 props나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적이다
컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 어렵지 않다
개별 컴포넌트마다 기존의 CSS를 이용하여 스타일 속성을 정의하면 될 뿐이다
화면에 컴포넌트가 렌더링 되었는지 추적해 컴포넌트에 대한 스타일을 자동 삽입 -> 코드를 적절히 분배해 놓으면 최소한의 코드만으로 화면을 띄움

scss와의 차이점

SCSS: css in css 문법으로 js 파일과는 분리 / styled-componenets: css in js 방식으로 컴포넌트가 렌더링 될 때만 해당 스타일 정보를 읽음
SCSS: 어떤 컴포넌트의 상태값이 변하더라도 반응하기 쉽지않다
브라우저에 보이지 않은 컴포넌트까지 읽기 때문에 불필요한 컴파 일 과정이 추가된다
-styled-components: 동적인 이벤트가 많은 사이트라면 컴포넌트가 자주 렌더링 될 때 그만큼 스타일 정보도 다시 읽어와야한다 / SCSS: 이미 html문서에 읽혀져 있는 상태이기 때문에 처음에는 스타일 정보를 가져오는 양이 많더라도 그 후 추가적인 렌더링은 상대적으로 적을 것이다

{ 렌더링 속도가 빨라야 하는 인터랙티브한 프로젝트라면 CSS in CSS
개발의 효율성이 중요하고 컴포넌트 위주의 프로젝트라면 CSS in JS }