Styled Component
Styled Component란?
- Javascript 파일 안에서 CSS를 처리 할 수 있게 해주는 대표적인 ‘CSS-in-JS’ 라이브러리.
- 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 부름.
- css가 전역으로 중첩되지 않도록 만들어주는 장점이 있음.
- CSS의 컴포넌트화로 스타일시트의 파일을 유지보수 할 필요가 없음. CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화함.
- JavaScript와 CSS 사이의 상수와 함수를 쉽게 공유할 수 있음.
- 현재 사용중인 스타일만 DOM에 포함함.
- CSS-in-JS는 짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 코드 경량화의 장점이 있음.
Styled Component 시작하기
// with npm
npm install styled-components
// with yarn
yarn add styled-components
기본스타일링
style.js
export const 컴포넌트 = styled.태그`
스타일: 스타일;
`
Main.js
const Main = (): JSX.Element => {
return <컴포넌트 />
}