styled-components

개요

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

• class 만들어 놓은걸 까먹고 중복해서 또 만들거나
• 다른 컴포넌트의 원하지 않는 스타일이 적용되거나
• CSS파일이 너무 길어져서 수정이 어렵거나

같은 경우가 있다.

그래서 스타일을 바로 적용해 컴포넌트를 만들 수 있는데…

styled-components

---

install

npm install stlyed-components

import

import styled from 'styled-components'

Usage

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

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

<div> 를 만드려면 styled.div``

<p> 를 만드려면 styled.p`` .

backtick 기호 안에 CSS를 지정해 줄 수 있고

변수에 할당해 사용할 수 있다.

장점

1. CSS 파일을 따로 만들지 않고도 JS파일에서 바로 스타일을 지정해 줄 수 있다.
2. 해당 파일에서만 사용이 가능하기 때문에 다른 파일로 오염되지 않는다.
3. 페이지 로딩시간이 단축된다.

단점

1. JS 파일이 복잡해진다. 그리고 이 컴포넌트가 styled인지 일반 컴포넌트인지 구분이 어렵다.
2. JS 파일 간 중복 디자인이 필요한 경우에 다른 파일에서 import 시, CSS파일 사용과 차이가 없다.
3. 협업자가 styled-components 문법을 모른다면 여러 에로사항이 있을 수 있다.

CSS 오염방지

App.css 파일을 만들어서 App.js에서 import를 해서 사용해도

클래스명들은 Detail.js 까지 사용이 가능해 진다.(오염됨)

이를 방지하기 위해 다른 JS파일에 간섭하지 않는 ‘모듈화’ 기능을 제공한다.

컴포넌트명.module.css 와 같이 네이밍 시, 컴포넌트명.js 에서 import해서 사용하면 그 파일에만 적용이 가능하다.

확장성

props 문법을 활용해 여러가지 비슷한 UI를 만들 수 있다.

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

또한 만들어진 컴포넌트를 상속 시켜 사용도 가능하다.

let YellowBtn = styled.button`
  background: ${props => props.bg};
  color: ${props => props.bg == 'blue' ? 'white' : 'black'};
  padding: 10px;
`
let NewBtn = styled(YellowBtn)`
  border-radius: 30px;
`