리액트 - styled-components

컴포넌트가 많은 경우 스타일링을 하다보면 중복된 class를 만든다거나 CSS 파일이 길어지는 등 불편함이 생긴다. 그래서 스타일을 바로 입혀서 컴포넌트를 만들수 있는 라이브러리가 있는데 바로 styled-components 이다.

우선 다른 라이브러리와 마찬가지로 터미널을 켜서 install을 해준다 명령어는 'npm install styled-components'

import styled from 'styled-components'

그리고 사용하고 싶은 컴포넌트 맨 위에 위와 같이 import 해준다.

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

위와 같이 변수를 선언해서 'styled.태그' 라는걸 정의하고, 백틱 기호 안에 CSS 스타일을 넣을 수 있다.
그리고 선언한 변수를 컴포넌트 내에 입력하면 사용이 가능하다.

이렇게 styled-components를 사용하면 CSS 파일을 오픈할 필요 없이 바로 스타일을 넣을 수 있고, 다른 JS 파일에 스타일이 오염되지 않는다. 또 페이지 로딩시간이 단축되는데 그 이유는 저기 적은 스타일들은 html 페이지의 <style>태그에 넣어주기 때문이다.

만약 같은 버튼들을 색만 다르게 만들고 싶다면 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>
  )
}

위처럼 styled-components에서 background 값을 ${props => props.bg}로 놓고 컴포넌트에서 사용할 때 bg="orange" , bg="blue"와 같이 입력하면 서로 색만 다른 같은 버튼들이 보여진다.

그러나 편하다고 많이 사용하면 JS 파일이 매우 복잡해지니 유의하자.