styled-components

 

많은 컴포넌트에 스타일링을 할 때 아주 유용한 css 라이브러리인

styled-components 를 알아보자.

 

npm install styled-components

 

import styled from 'styled-components'

 

1. 사용법

- 컴포넌트 생성 시, 스타일을 미리 지정하여 만들 수 있다.

- `` 백틱 기호를 이용하여 css 스타일을 넣을 수 있음.

 

2. 장점

- css 파일 열어서 작성할 필요 없음.

- js 파일에서 바로 스타일링 가능해서 다른 js 파일에 영향이 가지 않아서 좋음.

- 페이지 로딩 시간 단축

 

3. props 로 재활용 가능

- 재사용되는 컴포넌트 UI 가 있을 경우 아주 용이함.

 

import styled from 'styled-components';

let colorBtn = styled.button`
    background: ${ props.bg };
    color: ${ porps => props.bg == '#000' ? '#fff' : "#ededed" };
    padding: 20px;
`

const Page = () => {
    return (
        <div>
            <colorBtn bg="black">블랙 버튼</colorBtn>
            <colorBtn bg="pink">핑크 버튼</colorBtn>
        </div>
    )
}

 

styled-components 에서 props 사용하는 방법!

${ props => props.bg }

props 로 bg 를 전달하여 자유롭게 색 지정하고 너무 편함.

 

4. 단점?

- js 파일이 매우 복잡해진다.

- 협업 시, 불편한 상황이 올 수도 있음~