리액트로 쇼핑몰 사이트 만들기 #4 styled-component

 

[ 장점 ]

1. 본래라면 js 파일에서 <button className="어쩌구"></button>태그를 만들고, css 파일에서 꾸며줘야했다.
하지만 styled-components 라이브러리를 사용한다면 css 파일을 굳이 만들 필요 없이 js 파일에서 끝낼 수 있다.

2. 페이지 로딩시간이 단축된다.

3. 적용하는 스타일이 다른 js 파일로 오염되지 않는 장점도 있다.

App.css 파일은 App.js 파일 뿐만 아니라 Detail.js, data.js 파일에도 반영되기 때문이다.

물론 오염 방지를 위한 방법이 있긴 하다.
css 파일 작명시 < 반영하고싶은js파일명.module.css > 로 만들면 된다.

---

[ 사용방법 ]

터미널에 아래와 같이 입력하여 설치한다.

npm install styled-components

import styled from 'styled-components'

1. 버튼 만들기

styled.button

여기에 꾸미고 싶다면

styled.button`
    이 안에 스타일을 쓰면 된다.
    하나의 컴포넌트라고 생각하면 된다.
`

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

변수에 넣어주면 여기저기 활용 가능하다

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

---

2. 박스 만들기

 

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

 

---

 

3. props 로 컴포넌트 재활용이 가능하다.

 

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

이렇게 지정하면

<YellowBtn bg="yellow">버튼</YellowBtn> // 노란 버튼
<YellowBtn bg="blue">버튼</YellowBtn> // 파란 버튼

 

---

4.  조건문 사용도 가능 하다.

 

앞선 코드를 보면 노란 버튼에 검정색 글씨로 버튼이라는 글씨는 잘 보인다
하지만 파란버튼에 검정색 글씨는 잘 보이지 않는다. 

글씨가 하얀색이면 잘 보일 것 같다.

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

파란 버튼이 하얀색 글씨로 써있다.

---

 

5. 기존 스타일 복사 가능

 

let NewBtn = styled.button(복사하고싶은변수명)`
    복사한 스타일에 추가로 더 스타일을 더할 수 있다.
`

 

---

[ 단점 ]

1. js 파일이 길어지고, 복잡해진다.

2. 다른 파일에서 중복해서 사용하고 싶으면 import 로 가져올 수 있다. 
하지만 그러면 css 파일을 사용하는 것과 다름없다.

3. 협업할 때 CSS 를 잘하는 사람이 있다면 코드를 알아보기 어려울 것이다.
따라서 협업을 할 때 styled component 를 사용할 지 미리 이야기를 해야할 것.


이러한 단점들로 styled component 대신 css 파일을 선호하는 개발자들도 있다.