Front-end/React
[React] 스타일드 컴포넌트(styled-compnents)
늘이
2023. 5. 15. 00:51
styled-compnents
- CSS문법을 그대로 사용하면서 결과물을 스타일링 된 컴포넌트 형태로 만들어주는 오픈소스 라이브러리
- 컴포넌트 개념을 사용하기 때문에 리액트와 궁합이 잘 맞음
- 태그드 템플릿 리터럴을 사용하여 구성 요소의 스타일을 지정
- <style></style>로 넣어주기 때문에 페이지 로딩 시간 단축
1) styled-compnents설치
# npm을 사용하는 경우
npm install --save styled-components
# yarn을 사용하는 경우
yarn add styled-components
2) styled-components 기본 사용법
- 태그드 템플릿 리터럴(tagged template literal)을 사용하여 구성 요소의 스타일 지정
| 템플릿 리터럴 - 리터럴을 템플릿 형태로 사용하는 자바 스크립트에서 제공하는 문법 - backticks(`)를 사용하여 문자열을 작성하고 그 안에 대체 가능한 expression을 넣는 방법 - 크게 언태그드 템플릿 리터럴(Untagged template literal)과 태그드 템플릿 리터럴로 나뉨 |
- backticks(`)으로 둘러싸인 문자열 부분에 CSS 속성을 넣고 태그 함수 위치에는 styled.<HTML 태그> 형태로 사용
const Block = styled.div`
padding: ${(props) => props.padding};
border: 1px solid black;
border-radius: 1rem;
background-color: ${(props) => props.backgroundColor};
color: white;
font-size: 2rem;
font-weight: bold;
text-align: center;
`;
3) styled-components의 props 사용하기
- 조건이나 동적으로 변하는 값을 사용해서 스타일링 할 때 props사용
import { useParams } from "react-router-dom";
import styled from 'styled-components';
let SkyBtn = styled.button`
background : ${ props => props.bg };
color : black;
padding : 10px;
`
function Detail(props) {
let {id} = useParams();
return (
<div className="container">
{/* props.bg로 컴포넌트 재활용 가능 */}
<SkyBtn bg="skyblue">버튼</SkyBtn>
<div className="row">
<div className="col-md-6">
<img src={"https://codingapple1.github.io/shop/shoes" + (props.shoes[id].id + 1) +".jpg"} width="100%" />
</div>
<div className="col-md-6">
<h4 className="pt-5">{props.shoes[id].title}</h4>
<p>{props.shoes[id].content}</p>
<p>{props.shoes[id].price}</p>
<button className="btn btn-danger">주문하기</button>
</div>
</div>
</div>
)
}
export default Detail;
4) styled-components의 스타일 확장하기 (기존 스타일 복사)
- 생성된 컴포넌트를 기반으로 추가적인 스타일을 적용하기위해 styled-components에서는 스타일 확장 기능 제공
5) 단점
- JS파일이 복잡해짐(컴포넌트가 styled컴포넌트인지 일반 컴포넌트인지 구분하기 어려움)
- JS파일간 중복 디자인이 필요한 경우 import 해서 사용하면 되는데, 이렇게 사용하면 css파일 쓸 때랑 별 차이가 없음
- css 담당 디자이너가 있다면 협업 시 불편함(디자이너가 styled-components 문법을 모르는 경우 css를 받아 문법을 수정해야 하기 때문)