React styled-components

설치

터미널에 아래명령어로 설치한다.
npm install styled-components
그리고 사용하고 싶은 컴포넌트 상단에 import 해온다.

import styled from 'styled-components'

사용법

아래와 같이 styled.태그명``; 으로 사용 가능하다.

import styled from 'styled-components';

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

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

변경되거나 재사용할 속성은 props로 설정이 가능하다.
또한 자바스크립트라서 프로그래밍적으로도 사용할 수 있다. (하단 삼항연산자)

const YellowBtn = styled.button`
  background: ${props => props.bg};
  color : ${ props => props.bg == 'blue' ? 'white' : 'black' };
  padding: 10px;
`
// 생략
return(
  <>
    <YellowBtn bg="blue">버튼</YellowBtn>
  </>
)

장점 :
1. 제한된 확장성 (다른 파일에 간섭하지 않는다)
2. CSS를 props 등 프로그래밍화 가능
이는 styled-components 외에 일반 css파일도 적용할 수 있는데 css 파일 작명을
컴포넌트명.module.css로 작명하면 해당 컴포넌트에만 적용되는 css파일을 만들 수 있다.

단점 : js파일이 매우 복잡해지며 일반 컴포넌트와 구분하기 어렵다.
또한 디자이너, 퍼블리셔와 협업시 styled-components 문법을 모른다면 불편할 수 있다.