React) css는 없어도 돼, styled-components

styled-components

보통 ui의 디자인 작업은 css에서 진행하는데,
styled-components문법을 사용하면
js파일내에서 바로 스타일이 지정된 컴포넌트를 사용할 수 있다.

1. 설치

import styled from 'styled-components'

2. 기본적 사용법

import styled from 'styled-components';

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

function Detail(){
  return (
    <div>
      <Box>
        <YellowBtn>버튼임</YellowBtn>
      </Box>
    </div>
  )
}

3. 추가 문법_props의 활용

import styled from 'styled-components';

let YellowBtn = styled.button`
  background : ${ props => props.bg }; //arrow함수로 받아옴
  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; 
`; 

장점

1. CSS 파일 오픈할 필요없다.
2. 여기 적은 스타일이 다른 JS 파일로 오염되지 않습니다.
3. 페이지 로딩시간 단축.

단점

1. 약간 오히려 복잠.. 그리고 이 컴포넌트가 styled 인지 아니면 일반 컴포넌트인지 구분이 어려워짐.
2. JS 파일 간 중복 디자인이 필요하면 import해서 쓰는데 그럼 css와 다를 게 없음. import해서 쓸거면 속도차이도 안남.
3. 약간 신기술이라서 협업시 이슈 발생가능.