Styled Components: 스타일을 style 태그로 분리
- 대표적인 CSS-in-JS 라이브러리
- 자바스크립트의 태그가 지정된 템플릿 리터럴과 CSS의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공
특징
CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화하는 모듈성
CSS-in-JS는 JavaScript 환경을 최대한 활용
자바스크립트와 CSS 사이의 상수와 함수를 공유
현재 사용 중인 스타일만 DOM에 포함
짧은 길이의 유니크 한 클래스를 자동으로 생성하는 코드 경량화
설치
$ npm install styled-components
문법
import styled from 'styled-components;'
let 태그이름작명 = styled.div`
padding: 20px;
background-color: red;
color: ${ props => props.색상 }
`
- 스타일링을 원하는 태그명을 변수로 작성
- styled.태그 뒤에 백틱(``)을 넣어준 뒤, 그 안에 원하는 css스타일링
- color가 다른 div를 여러개 만들고 싶을 때, 개별적용할 속성을 props로 만든다.
<태그이름작명 색상="red"> h4로 만든 콘텐츠 <태그이름작명>
'Development > React.js' 카테고리의 다른 글
Redux (0) | 2022.03.24 |
---|---|
상태관리 라이브러리 (0) | 2022.03.24 |
CSS in JS (0) | 2022.03.24 |
PropTypes (0) | 2022.03.24 |
Portal (0) | 2022.03.24 |