[React] styled-components

안녕하세요 오늘은  React에서 css를 사용하는 방법 중 하나인 styled-components에 대해 포스팅하겠습니다.

styled-components 는 app.css에서 작성하는 것도 아니고 , jsx 파일내에 태그들에 직접 작성하는 것도 아닙니다.

기본 html 구조에서 <header>태그에서 작성했던 <style> 태그처럼 페이지 상단에서 작성하는 방식입니다.

1) 설치
터미널을 열고 npm install styled-components 를 실행합니다.

2) styled-components import

import styled from 'styled-components';

상단에 import 해줍니다
3) 변수를 생성하여 style 작성하여 담기

let Btn = styled.button`

  background : ${ props => props.bg };

  color : ${ props => props.bg == 'blue' ? 'red' : 'blue'};

`

styled.css요소(태그) 를 입력하고 , 백틱(~표시에 있는 문자)안에 css 내용을 작성합니다.
ex) styled.a styled.p 등등

props도 사용 가능합니다.
props => props.작명 으로 사용합니다

이 때 color 처럼 프로그래밍도 가능합니다

4) jsx에 Component 생성

<Btn bg="blue">버튼</Btn>

    <Btn bg="yellow">버튼</Btn>

위에서 작명된 bg 에 color들을 넣었습니다.

style 생성시 작성한 삼항연산자에 프로그래밍이 잘 적용된 모습입니다.

 

5) styled-components 의 장점
1. css 파일까지 안가고 현재 파일에서 css 작업을 할 수 있다
2. 다른 js파일로 오염되지 않음 (프로젝트 사이즈가 커질수록 오염 가능성 높음)
3. 페이지 로딩시간 단축

5) styled-components 의 단점
1. js파일이 복잡해짐 - 당연히 한 페이지에 여러 css들과 component를 생성하기 때문에 커질수록 복잡해짐
2. 협업시 styled-components를 모르는 사람과 충돌발생 가능

지적 감사히 받겠습니다 ~

감사합니다 ! ^^