[React]styled-components 첫 사용

어리틀빗을 만들면서 아쉬웠던 점은 아무래도 배움과 동시에 바로 구현을 진행하다보니, 리액트의 강점인 재사용 가능한 컴포넌트를 하나도 만들지 못했다는 것이였다. 이번 우디를 개발하면서, 그때의 문제를 해결하기 위해 styled-components를 도입해서 재사용 가능한 컴포넌트들을 만들고 적재적소에 넣는 방안을 시도해보고자 하였다.

styled-components 사용법

👉 공식 문서
https://styled-components.com/

1.설치하기

npm install --save styled-components

2.불러오기

import styled from 'styled-components'

3.만들기

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
`

이렇게 하면 안에 스타일을 지정한 Button 컴포넌트를 이용할 수 있다.

✅ const Button = styled.button -> button은 button html 태그 요소를 생성한다는 뜻이다. styled.div, styled.button, styled.h1 등등 생성하고자 하는 태그 요소를 선언하면 된다.

4.이용하기

render(
  <Container>
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button>
  </Container>
);