styled-components 사용하는 이유

컴포넌트가 많은 경우 스타일링을 하다보면

1. class 만들어놓은걸 까먹고 중복해서 또 만들거나
2. 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나
3. CSS 파일이 너무 길어져서 수정이 어려운 경우

이와 같은 불편함이 발생할 수 있습니다.
이때 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수 있는
styled-components 라이브러리를 사용할 수 있습니다.

설치방법

npm install styled-components
yarn add styled-components

그리고 사용하고 싶은 컴포넌트에

import styled from 'styled-components'

import 해야합니다.

styled-components 기본적인 사용법

import styled from 'styled-components';

let Box = styled.div`
 padding : 20px;
 color : grey
`;

styled-components 장점

1. CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일을 넣을 수 있습니다.

2. 컴포넌트에 적은 스타일이 다른 JS 파일로 오염되지 않습니다.

3. 컴포넌트에 적은 스타일은 html 페이지의 <style> 태그에 넣어줘서페이지 로딩시간 단축됩니다.

• CSS파일에서도 다른 JS 파일에 간섭하지 않는 '모듈화' 기능을 제공합니다.
  컴포넌트명.module.css 이렇게 CSS 파일을 작명하면 됩니다.
  그리고 컴포넌트명.js 파일에서 import 해서 쓰면 그 스타일들은 컴포넌트명.js 파일에만 적용됩니다.

props 재활용가능

import styled from 'styled-components';

const Btn = styled.button`
  background : ${ props => props.bg };
  color : black;
  padding : 10px;
`;

function Detail(){
  return (
    <div>
        <Btn bg="red">버튼</Btn>
        <Btn bg="blue">버튼</Btn>
    </div>
  )
}

추가

const Btn = styled.button` 
  background : ${ props => props.bg };
  color : ${ props => props.bg == 'blue' ? 'white' : 'black' };
  padding : 10px; 
`; 

styled-components 단점

1. JS 파일이 매우 복잡해집니다.
   그리고 이 컴포넌트가 styled 인지 아니면 일반 컴포넌트인지 구분도 어렵습니다.

2. JS 파일 간 중복 디자인이 많이 필요한 경우
   다른 파일에서 스타일 넣은 것들 import 해와서 쓰면 되지만 그러면 CSS파일 쓰는거랑 차이가 없다.
   쓸데없이 라이브러리를 추가하는 것일 수 있습니다.

3. CSS를 디자이너와 협업시 디자이너가 styled-components 문법을 모른다면 추가작업 필요할 수 있습니다.

출처 : 코딩애플