[React] - styled components

리액트에서 styled components는 자바스크립트와 css를 사용하여 리액트 애플리케이션 스타일링을 쉽게 할 수 있게 해주는 라이브러리이다. 리액트 컴포넌트를 만들 때 별도의 css 파일 없이 css를 자동으로 생성하여 적용해주는 기능을 제공한다.

styled components가 기존의 css 파일과 다른 점은 바로 아래와 같다.

• 컴포넌트 스타일을 컴포넌트 자체에서 캡슐화하여 다룰 수 있다.
• css 클래스 이름을 신경쓸 필요가 없다.
• 스타일을 작성할 때 자바스크립트를 이용할 수 있다.

❗️ styled-components 사용법

styled components를 사용하기에 앞서 먼저 터미널에서 설치부터 해주자.

npm install styled-components

그 다음 사용하고 싶은 컴포넌트 위에 아래와 같이 import한다.

import styled from 'styled-components'

내가 원하는 스타일을 컴포넌트 바깥에서 지정을 하여 변수에 담아준 뒤, 해당 변수를 컴포넌트 안에서 호출하여 사용하면 끝!

ex.

/* Detail.js */
import styled from 'styled-components'
...

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

let Box = styled.div`
	background: grey;
	padding: 20px;
`

function Detail(props) {
  ...
  return (
  <Box>
  	<BlueBtn>버튼</BlueBtn>
  </Box>
  )
}

❗️ 만약 같은 특성을 가진 styled components가 여러개 필요하다면?

• 매번 컴포넌트를 만들지 말고 props를 활용하여 한 번에 구현하면 된다.

ex)

let Btn = styled.button`
background: ${ props => props.bg }; /* 외부 라이브러리 문법이므로 그냥 외우기 */
color: black;
padding: 10px;
`

<Btn bg = 'green'></Btn>

❗️ 기존 스타일 복사 & 커스터마이징도 가능

let NewBtn = styled.button(Btn)`
~~ 커스터 마이징 ~~
`

❗️ 단점

• js 파일 매우 복잡해짐
• 이 컴포넌트가 style 컴포넌트인지 일반 컴포넌트인지 알기 어려움
• 중복 스타일은 컴포넌트 간 import를 해주어야 하는데, 그러면 사실상 css 파일을 새로 만들어서 쓰는 것과 별반 다를 게 없음
• 협업시 이슈 있을 수도