🧵 만약에

컴포넌트가 많은 경우 css로 스타일을 지정해 줄 때 여러 가지 불편함이 생길 수 있다. class 이름이 중복되어 원하지 않는 스타일이 적용되거나 css 파일이 너무 길어져서 가독성이 떨어지고 수정이 어려우며..... 등등.

이때 사용하는 것이 styled-components다. 이 라이브러리를 사용하면 스타일을 바로 입혀 컴포넌트를 만들 수 있다는 장점이 있다. 이번 포스팅에서는 위 내용을 다뤄 볼 것이다. 🎉

---

🧶 styled-components

설치하기

npm install styled-components

터미널에 위 코드를 입력해 styled-components 라이브러리를 설치해 준다.

사용 방법

import styled from "styled-components";

...

styled.태그명`
	css 코드
`

예시로 만약 노란색 배경에 검정색 텍스트가 적힌 버튼을 만들고 싶다면 아래와 같이 작성하면 된다.

...

let YellowBtn = styled.button`
    background : yellow;
    color : black;
	padding : 10px;
`

...

<YellowBtn>버튼</YellowBtn>

짠! 이런 식으로 컴포넌트로 만들어 적재적소에 사용할 수 있다. 😎

또한 props로 컴포넌트를 재활용 할 수도 있다. 만약 컴포넌트에 적용된 css 중 배경 색상만 blue로 바꾸고 싶다면 어떻게 하면 좋을까? 그럴 때는 이렇게 작성하면 된다.

...

let YellowBtn = styled.button`
    background : ${props=>props.bg};
    color : black;
    padding : 10px;
`

...

            <YellowBtn bg="blue">버튼</YellowBtn>

배경 색이 파란색인 버튼이 만들어졌다! props만 조금씩 변경해 주면 원하는 부분만 다양한 스타일로 변경 가능하다.