[React] styled-components

컴포넌트가 많으면...

1. class를 만들어두고 까먹어서 중복으로 또 만들 수 있음
2. 다른 컴포넌트에 원하지 않는 스타일이 적용될 수 있음
3. CSS 파일이 너무 길어져서 수정이 어려워짐

 

-> 스타일을 컴포넌트에 바로 입혀서 만들기 => styled-components

 

 

0. 우선 설치!

 - 터미널에서

  npm install styled-components  

 

 - 사용할 곳 상단에 import

 - 필요한 파일에 스타일링

 - 스타일링한 변수로 태그 사용

import styled from 'styled-components';

let BlueBtn = styled.button`
  background : skyblue;
  color : black;
  padding : 10px;
`

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

function Detail(){
  return (
    <div className="container">
      <Box>
        <BlueBtn></BlueBtn>
      </Box>
      ...

 

 

1. 프롭스 사용해서 스타일링 옵션 변경

import styled from 'styled-components';

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

function Detail(){
  return (
    <div className="container">
        <BlueBtn bg="blue"></BlueBtn>
      ...

 

2. 응용

import styled from 'styled-components';

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

function Detail(){
  return (
    <div className="container">
        <BlueBtn bg="blue"></BlueBtn>
        <BlueBtn bg="orange"></BlueBtn>
      ...

결과

 

 

3. 기존에 있던 스타일링 복사

let BlueBtn = styled.button`
  background : 'white';
  color : 'blue';
  padding : 10px;
`

// 기존 스타일 복사가능
let NewBtn = styled.button(BlueBtn);

 

 

 

4. App.css 파일이 다른 파일에 간섭하게 싫다면? - App.module.css로 파일명 변경(App.js에 종속됨)

 

styled-components 장점

• CSS파일 필요없이 JS파일에 스타일링 가능
• 여기서 적은 스타일이 다른 JS파일에 간섭하지 않음
• 페이지 로딩시간 단축 - HTML 파일에 <style>태그로 넣어줘서 CSS파일을 열어보지않음

 

styled-components 단점

• JS파일이 복잡해짐
• 다른 파일에서 스타일을 사용하려면 컴포넌트간 import를 해야함 -> CSS랑 다른게 없음
• 협업시 CSS 담당의 숙련도 이슈