[React] styled component

💡 styled-components 쓰면 JS 파일에서 CSS 전부 해결가능

1. styled component 설치

npm install styled-components

2. import 해오기

import styled from "styled-components";

3. Component 생성

💡 **function 바깥에** 컴포넌트 생성

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

4. Component 사용

<YellowBtn>버튼</YellowBtn>

Styled-component 장점

장점1. CSS 파일 안열어도 된다

장점2. 스타일이 다른 js파일로 오염되지 않음

→ 오염방지하려면 이렇게 파일 작명하자

**컴포넌트.module.css**

App.module.css 

장점3. 페이지 로딩시간 단축

→ 로 넣어주므로 페이지 로딩시간이 단축됨

Styled-component 단점

단점1. JS파일이 매우 복잡해짐

단점2. 중복스타일은 컴포넌트간 import할텐데 CSS와 다를바가 없음

단점3. 협업시 CSS 담당의 숙련도 이슈

Q. 다른색 버튼이 필요하면?

→ 파라미터, props 문법 쓰자!!

→ 가변적인 부분을 props로 뚫어놓고 컴포넌트 재활용 가능

**${ props => props.변수 }**

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

<YellowBtn **bg="blue"**>파란색 버튼</YellowBtn>
<YellowBtn **bg="orange"**>오렌지색 버튼</YellowBtn>

Styled component에 조건문 넣기

Q. 만약에 props.bg가 blue면 font색상은 white로 해주세요. 그게 아니면 black으로 해주세요

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

기존 styled component 받아와서 사용할 수도 있음

let NewBtn = styled.button(YellowBtn)`
`