Styled Components
styled components는 JavaScript 파일 내에서 CSS를 작성할 수 있게 해주는 CSS-in-JS 라이브러리로, React와 같은 JavaScript 라이브러리(프레임워크)와 함께 사용되며 컴포넌트 기반 스타일링을 쉽게 구현할 수 있다. Styled Components를 사용하면 스타일을 컴포넌트와 함께 캡슐화하여 유지보수성을 높이고 스타일링의 범위를 컴포넌트 단위로 제한할 수 있다.
주요 특징
1. 컴포넌트 기반 스타일링
- CSS를 컴포넌트 안에 작성하여, 스타일과 로직을 하나의 파일에 캡슐화할 수 있다.
2. 동적 스타일링
- props를 사용해 동적으로 스타일을 변경할 수 있다.
3. 네임스페이스 충돌 방지
- 고유한 클래스명을 생성하여 CSS 클래스 네임 충돌을 방지한다.
4. 자동 벤더 프리픽싱
- 다양한 브라우저에서 일관된 스타일을 적용할 수 있도록 벤더 프리픽스를 자동으로 추가한다.
* 벤더 프리픽스(Vendor Prefix)는 CSS 속성에 특정 브라우저 벤더(제조사)에서만 지원되는 기능이나 실험적인 기능을 사용할 수 있도록 추가되는 접두사를 의미한다. 벤더 프리픽스는 브라우저 호환성을 보장하고 표준이 확정되기 전에 새로운 기능을 테스트할 수 있게 한다.
주요 벤더 프리픽스
- -webkit-: Chrome, Safari, iOS
- -moz-: Firefox
- -o-: Opera
- -ms-: Internet Explorer, Edge
설치
npm install styled-components
또는
yarn add styled-components
Styled Components 사용 예제
1. 기본 사용법
import React from 'react';
import styled from 'styled-components';
// 스타일이 적용된 컴포넌트 정의
const Button = styled.button`
background-color: palevioletred;
color: white;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
const App = () => (
<div>
<Button>Styled Button</Button>
</div>
);
export default App;
2. 동적 스타일링
import React from 'react';
import styled from 'styled-components';
// 스타일이 적용된 컴포넌트 정의
const Button = styled.button`
background-color: ${props => props.primary ? 'palevioletred' : 'white'};
color: ${props => props.primary ? 'white' : 'palevioletred'};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
const App = () => (
<div>
<Button>Normal Button</Button>
<Button primary>Primary Button</Button>
</div>
);
export default App;
3. 확장된 스타일 정의
import React from 'react';
import styled from 'styled-components';
// 기본 버튼 스타일 정의
const Button = styled.button`
background-color: palevioletred;
color: white;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
// 기본 버튼 스타일을 확장한 새로운 스타일 정의
const TomatoButton = styled(Button)`
background-color: tomato;
border-color: tomato;
`;
const App = () => (
<div>
<Button>Styled Button</Button>
<TomatoButton>Tomato Button</TomatoButton>
</div>
);
export default App;
4. 애니메이션
import React from 'react';
import styled, { keyframes } from 'styled-components';
// 애니메이션 정의
const rotate = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;
// 애니메이션이 적용된 컴포넌트 정의
const RotatingDiv = styled.div`
display: inline-block;
animation: ${rotate} 2s linear infinite;
padding: 2rem 1rem;
font-size: 1.2rem;
`;
const App = () => (
<div>
<RotatingDiv>🔄</RotatingDiv>
</div>
);
export default App;
장단점 및 결론
장점
- 스타일과 컴포넌트를 하나의 파일에 캡슐화할 수 있다.
- props를 이용해 동적으로 스타일을 변경할 수 있다.
- 스타일과 로직이 한 파일에 있기 때문에 컴포넌트 단위로 유지보수가 용이하다.
- 네임스페이스 충돌이 방지되므로 스타일 이름이 중복될 일이 없다.
- 모든 CSS 기능을 사용할 수 있으며, 미디어 쿼리, 애니메이션 등을 쉽게 추가할 수 있다.
- 다양한 브라우저에서 일관된 스타일을 적용할 수 있도록 벤더 프리픽스를 자동으로 추가한다.
단점
- 런타임에 스타일을 생성하기 때문에, 큰 프로젝트에서는 CSS 파일 크기가 커질 수 있다.
- CSS를 JavaScript로 처리하기 때문에 빌드 시간과 성능에 약간의 영향을 미칠 수 있다.
결론
Styled Components는 컴포넌트 기반의 동적 스타일링과 CSS의 모든 기능을 활용하고자 하는 프로젝트에 적합하다.
'CSS' 카테고리의 다른 글
[CSS] Tailwind CSS (1) | 2024.07.15 |
---|---|
[CSS] 스크롤 바 숨기기 (0) | 2023.11.10 |
[CSS] Block Element Modifier (BEM) (0) | 2023.04.04 |