컴포넌트가 많은 경우 스타일링을 하다보면 중복된 class를 만든다거나 CSS 파일이 길어지는 등 불편함이 생긴다. 그래서 스타일을 바로 입혀서 컴포넌트를 만들수 있는 라이브러리가 있는데 바로 styled-components 이다.
우선 다른 라이브러리와 마찬가지로 터미널을 켜서 install을 해준다 명령어는 'npm install styled-components'
import styled from 'styled-components'
그리고 사용하고 싶은 컴포넌트 맨 위에 위와 같이 import 해준다.
import styled from 'styled-components';
let Box = styled.div`
padding : 20px;
color : grey
`;
let YellowBtn = styled.button`
background : yellow;
color : black;
padding : 10px;
`;
function Detail(){
return (
<div>
<Box>
<YellowBtn>버튼임</YellowBtn>
</Box>
</div>
)
}
위와 같이 변수를 선언해서 'styled.태그' 라는걸 정의하고, 백틱 기호 안에 CSS 스타일을 넣을 수 있다.
그리고 선언한 변수를 컴포넌트 내에 입력하면 사용이 가능하다.
이렇게 styled-components를 사용하면 CSS 파일을 오픈할 필요 없이 바로 스타일을 넣을 수 있고, 다른 JS 파일에 스타일이 오염되지 않는다. 또 페이지 로딩시간이 단축되는데 그 이유는 저기 적은 스타일들은 html 페이지의 <style>태그에 넣어주기 때문이다.
만약 같은 버튼들을 색만 다르게 만들고 싶다면 props로 재활용이 가능하다.
import styled from 'styled-components';
let YellowBtn = styled.button`
background : ${ props => props.bg };
color : black;
padding : 10px;
`;
function Detail(){
return (
<div>
<YellowBtn bg="orange">오렌지색 버튼임</YellowBtn>
<YellowBtn bg="blue">파란색 버튼임</YellowBtn>
</div>
)
}
위처럼 styled-components에서 background 값을 ${props => props.bg}로 놓고 컴포넌트에서 사용할 때 bg="orange" , bg="blue"와 같이 입력하면 서로 색만 다른 같은 버튼들이 보여진다.
그러나 편하다고 많이 사용하면 JS 파일이 매우 복잡해지니 유의하자.