[코딩애플;React]styled-component

class 만들어 둔 것 까먹고 중복해서 만들거나

갑자기 다른 이상한 컴포넌트에 원치않는 스타일이 적용되거나

css파일이 너무 길어져서 수정이 어렵거나 하다면

이 때는 styled-components가 사용하기 좋다.

 

1.styled-componetns 설치 및 사용법

 1)터미널에 npm install styled-components 입력 후 실행

 2) 아래처럼 import 입력

 

import styled from 'styled-components';

 

 

3)변수에 style 지정

let YellowBtn =styled.button`

background :yellow;

color: black;

padding:10px;

`

 

4)return 안에 보여지고 싶은 부분에 넣기

 

<YellowBtn>버튼</YellowBtn>

 

 

*props로 재활용 가능

import styled from 'styled-components';

let YellowBtn = styled.button`

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

  color : black;

  padding : 10px;

`;

function Detail(){

  return (

    <div>

        <YellowBtn bg="orange">오렌지색 버튼임</YellowBtn>

        <YellowBtn bg="blue">파란색 버튼임</YellowBtn>

    </div>

  )

}

 

*혹은 조건문도 사용이 가능함

let YellowBtn = styled.button`

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

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

  padding : 10px;

`;

 

 

2.styled-components의 장점

-css 파일 오픈할 필요 없이 js파일에서 바로 스타일 넣을 수 있다

-다른 js 파일로 스타일이 적용되지 않아 오염을 줄어듬

***그냥 css도 오염안되게 하려면 App.module.css 처럼 파일명을 작성하면 App.js 안에서만 사용 가능

-페이지 로딩 시간 단축: js파일 하나만 불러오면 되니까

 

 

3.styled-components의 단점

: 담당자의 숙련도,선호도 문제