styled components
💡 styled components는 컴포넌트 내에 Css를 쉽게 넣을 수 있는 도구이다.
설치
스타일드 컴포넌트를 사용하기 위해선 프로젝트 폴더에서 라이브러리를 설치해야 한다.
$ npm install styled-components스타일드 컴포넌트 기본문법
import styled from 'styled-components';
const Main = () => {
return <Title>main title</Title>;
};
const Title = styled.h1`
font-size: 120px;
color: green;
`; - 스타일드 컴포넌트를 사용하려면 우선 import해야 한다.
- 스타일드 컴포넌트는 html 태그처럼 사용할 수 있다.
- 스타일드 컴포넌트를 선언할 때 이름은 PascalCase를 이용해서 작성해야 한다.
const 컴포넌트명 = styled.태그`
css속성
`;컴포넌트 = styled.다음에 컴포넌트의 최상위 태그를 선언해 준다. ex)Title = styled.h1- 태그 다음 백틱을 주고 사이에 css 속성을 넣어준다. (css 처럼 -를 줘도 된다.)
- 스타일드 컴포넌트는 class명을 해시 값으로 자동으로 작성해줘서 class 명을 짓는데 시간을 최소화할 수 있다.
스타일드 컴포넌트 상속
const SmallBtn = styled.button`
background-color: blue;
`;
const MiddleBtn = styled(SmallBtn)`
font-size: 30px;
`;
const Main = () => {
<>
<SmallBtn>small</SmallBtn>
<MiddleBtn>middle</MiddleBtn>
</>MiddleBtn은 stlyed를 함수로 사용해서 인자로 SmallBtn을 넣어준다.
그럼 SmallBtn의 css속성과 최상위 태그를 그대로 가진 스타일드 컴포넌트가 생성된다.
SmallBtn은 배경이 초록이다. MiddleBtn은 SmallBtn의 속성을 그댈도 받고 거기다 font-size까지 추가해서 초록배경에 30px의 button을 갖게된다.
MiddleBtn은 SmallBtn의 class명도 가지고 본인의 class명도 가진다.
스타일드 컴포넌트 props
const SmallBtn = props => {
return <button className={props.className}>{props.children}</button>
}
const MiddleBtn = styled(SmallBtn)`
font-size: 30px;
`;
const Main = () => {
<>
<SmallBtn>small</SmallBtn>
<MiddleBtn>middle</MiddleBtn>
</>props를 열어보면 {children: “” , className: “”} 이 반환된다.
props.children은 컴포넌트 태그 사이의 문자, props.className은 컴포넌트의 class명이다.
동적 스타일드 컴포넌트(Props)
const BigBtn = styled.button`
color: ${props => props.primary ? 'green' : 'orange'};
`;
const [changeColor, setChangeColor] = useState(false);
const changeColorHandler = () => {
setChangeColor(!changeColor);
}
---
<BigBtn onClick={changeColorHandler} primary={changeColor}> Big </BigBtn>- 태그 내부에
속성명=값을넣어준다. - 속성 값에
${}안에 함수를 줘서 동적으로 속성값을 관리할 수 있다.
네스팅
const Main = () => {
return (
<List>
<li>
상품
</li>
</List>
);
};
const List = styled.ul`
width: 300px;
li {
width:250px;
font-size: 15px;
}
`;
export default Main;스타일드 컴포넌트도 scss처럼 네스팅을 사용할 수 있다.
외부 라이브러리(slick등)를 사용할 때 정해진 속성을 변경해야 해서 네스팅을 사용해 속성을 변경해준다.
하지만 스타일 컴포넌트는 컴포넌트를 분리해서 모듈화하기 위해 최적화되어있어서 네스팅은 굳이 필요한게 아니라면 사용하지 않는다.
마치며
현재 스타일드 컴포넌트를 이용해서 개발을 하고있지만 장점이라고 생각되는 부분은 class명을 고민하고 이름이 중복됐을 때 격는 고통에서 벗어날 수 있다는 것 같다.
컴포넌트를 한의 기능 단위를 넘어서서 더 작은 태그단위로 분리하다보니 재사용이 상당히 용이
한거 같다.왜 쓰는지 이해가 안갔는데 이글을 정리하다 보니 누구보다 왜 사용하는지 잘 알고 있었다는 것을 알게되었다.
