React실전7 styled-components

styled-components

• import 해서 사용하기

• styled-components 홈페이지 가서 사용법 확인해서 쓰기

• styled-components 쓰면 js 파일에서 전부 해결 가능

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

• 백틱 기호를 쓰고 안에 스타일을 쓴다.
• 이걸 변수에 줘서 쓴다.
• 이 자리에 남는게 스타일에 남겨진 컴포넌트이기 때문에 대문자로 작명

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

• 그리고 밑에 가서 쓰고싶은 곳에 <YellowBtn>버튼</YellowBtn> 해서 쓰면 버튼이 생긴다.

styled-components 장점1.

• css 파일 안열어도 된다.

styled.div`
 background : grey;
 padding : 20px;
`
<Box>
<YellowBtn>버튼</YellowBtn>
</Box>

styled-components 장점2.

• 스타일이 다른 js 파일로 오염되지 않음

• 여기에 적힌 style 들은 이 안에서만 사용되는 것.
• 오염방지하려면 -> 컴포넌트.module.css 라고 작명하면
• 컴포넌트.js 파일에 종속되도록 하는 css

App.module.css 는 App.js에만 종속이 되는 css다.

styled-components 장점3.

• 페이지 로딩시간 단축 <style><style/>로 넣어줌->페이지 로딩시간 단축

오렌지색 버튼이 필요하다면?

• 비슷한 컴포넌트들 -> 여러개 만들 필요 없어. -> props 문법 쓰면 됨. ```js let YellowBtn = styled.button background : $( props => props.bg ); //이렇게 뚫어놓으면 됨. color : black; padding : 10px; // YellowBtn을 가져다 쓸 때 bg 라는 props를 입력할 수 있습니다. // 라는 뜻 //외부 라이브러리 사용법임. (문법)

<YellowBtn bg=“blue”>버튼</YellowBtn>

- 이런식으로 props 를 뚫어놓으면 컴포넌트 재활용 가능.

- 그냥 css는 클래스명을 더 많이 만들면된다.

```js
let YellowBtn = styled.button`
 background : $( props => props.bg ); //이렇게 뚫어놓으면 됨.
 color : $( props => props.bg == ‘blue’ ? ‘white’ : ‘black’ );
// 이렇게 프로그래밍스러운 것도 작성 가능 
 padding : 10px;
`
//props.bg가 블루로 들어오면 화이트로 남겨주세요 아니면 블랙으로 남겨주세요.

(참고1) 당연히 간단한 프로그래밍 가능

(참고2) 기존 스타일 복사 가능

styled.button(YellowBtn) //이렇게 복사 가능 //그리고 이걸 변수에 담아

let NewBtn = styled.button(YellowBtn)
// 그리고 여기서도 커스터마이징 가능 ` 백틱키 써서 `

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

• 스타일 컴포넌트인지 그냥 컴포넌트인지 구분이 안가서.

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

• 이 스타일을 다른 파일에서 재사용하고 싶어진 거야.

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