styled-components 라이브러리 설치 및 간단한 사용법

styled-components 왜 쓰는가

 

컴포넌트가 많아질수록 아래의 문제점이 생긴다.

1. class 만들어놓은걸 까먹고 중복해서 또 만들거나

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

3. CSS 파일이 너무 길어져서 수정이 어렵거나

 

설치법

 

터미널 열어서 

npm install styled-components

쓰고싶은 파일에 

import styled from 'styled-components'

끗!

 

사용법

 

컴포넌트를 만들때 스타일을 미리 주입해서 만들 수 있다.

<div>를 만들고 싶으면 let 변수명 = styled.div`css`

<button>를 만들고 싶으면 let 변수명 = styled.button`css`

 

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>
  )
}

 

props도 사용가능

 

컴포넌트 속성에 bg="orange" 넣으면 된다. ( bg={orange} 아니다)

그런 다음 ${ props => props.bg }; 로 가져오면된다. (props.bg하면 "orange"오겠지?)

삼항연산자도 가능하다.  // background : ${ props => props.bg === "orange" ? "white" : "black" };

import styled from 'styled-components';

let YellowBtn = styled.button`
  background : ${ props => props.bg };
  // background : ${ props => props.bg === "orange" ? "white" : "black" };
  color : black;
  padding : 10px;
`;

function Detail(){
  return (
    <div>
        <YellowBtn bg="orange">오렌지색 버튼임</YellowBtn>
        <YellowBtn bg="blue">파란색 버튼임</YellowBtn>
    </div>
  )
}

 

장점

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

장점2. 여기 적은 스타일이 다른 JS 파일로 오염되지 않습니다. 원래 그냥 CSS파일은 오염됩니다.

장점3. 페이지 로딩시간 단축됩니다.

 

 

단점

단점1. JS 파일이 매우 복잡해집니다.

단점2. JS 파일 간 중복 디자인이 많이 필요하면 import해오면 되는데 css파일 쓰는거랑 다를게 없을듯

단점3. CSS 담당하는 디자이너가 있다면 협업시 불편