React - styled components 라이브러리

리액트를 사용하며 css 병행하는 것이 귀찮고 속도 향상에 관심이 있다면

styled components 라이브러리를 사용해보자.

 

설치방법

npm install styled-components

터미널에 위 코드를 치고 다운을 받는다. 그리고 다시 npm run.

 

---

 

적용할 js파일에서 import 후 사용할 수 있는데, css 코드를 `` 백틱 안에 짜면 됨.

컴포넌트기때문에 작명 시 앞자리는 대문자로 작성하자.

import styled from 'styled-components';


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


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

위 버튼과 아래 버튼의 차이는 재사용성이다. background컬러를 하드코딩 해놓으면 영원히 지정된 버튼 색으로만 사용할 수 밖에 없기에 props로 구멍 뚫어서 활용하자.

 

사용법은 props.작명 후 html 태그에서 지정

function Detail() {

        return (
            <Btn bg='blue'> 버튼 </Btn>
        )
        
}

 

또 styled component 사용의 이점으로는

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

1. css코드에 js를 사용할 수 있기 때문에 조건문을 활용하는 등 간단한 프로그래밍이 가능하다.

 

let newBtn = style.button(Btn)`
	커스터마이징
`

2. 기존에 있는 버튼을 복사해 커스터마이징해서 사용할 수 있다.

 

---

단점으로는

 

1. JS파일이 복잡해진다....

2. 페이지가 많아지면 중복스타일은 컴포넌트간 import를 할텐데 그럴거면 css 파일 쓰는거랑 별반 차이없다.

3. 협업 시 css 담당의 숙련도에 따른 이슈

---

참고로 css파일명이 App.css인 파일은 폴더안의 모든 js파일에 영향을 끼친다.

App.js 파일에만 종속되게 하려면 App.module.css 로 파일명을 바꿔주자.