Written by Parkdev
on January 20, 2024

styled-components 사용해보기

# styled-components 사용해보기

컴포넌트가 많은 경우 스타일링하기가 매우 불편하다
때문에 해당 페이지에서 간단하게 스타일을 적용한 컴포넌트를 만들 수 있는 기능으로 styled-components를 사용할 수 있다.

예시)

// 버튼 만들기
let YellowBtn = styled.button`
  background : yellow;
  color : black;
  padding : 10px;
`

// 박스만들기
let Box = styled.div`
  backbround : grey;
  padding : 20px;
  
본문...

  <Box>
    <YellowBtn>버튼</YellowBtn>
  </Box>

응용

// 비슷한 컴포넌트 만들때 임의의 props를 생성 할 수도있다.
// ㄴ조건으로 정의가 가능하다
let YellowBtn = styled.button`
  background : ${ props => props.bg};
  color :  ${ props => props.bg == 'blue' ? 'white' : 'black'};
  padding : 10px;
`
// 상속도 가능하다
let NewBtn = styled.button(YellowBtn)`
  margin : 1px
`

본문...

  <YellowBtn bg='blue'>버튼</YellowBtn>

장점

CSS 파일 오픈할 필요 없이 JS 파일에서 바로 스타일넣을 수 있다.
스타일이 다른 js파일로 오염되지 않음
페이지 로딩시간이 단축된다.

단점

JS파일이 매우 복잡해진다.
스타일 재사용하기 위해서는 export해서 import해야한다. (더복해진다.
협업시 CSS 숙련도 이슈가 생길 수 있다.

#### cf) 파일 작명으로도 해결할 수 있다.

컴포먼트.js에만 적용하고 싶은 css파일을 만들고자한다면

컴포넌트명.module.css

← → Top