styled-component

세팅

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-component를 이용하면 컴포넌트를 만들 때 스타일을 미리 주입해서 만들 수 있다.
• <div>를 하나 만들고 싶으면 styled.div 라는 걸 사용
  • <p>를 만들려면 styled.p 이런식
• 오른쪽에 ` `backtick 기호를 이용해서 CSS 스타일을 넣을 수 있다.

장점

• CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일 넣을 수 있다.
• 여기 적은 스타일이 JS 파일로 오염되지 않는다. 원래 그냥 CSS 파일은 오염됨
  • 만약 App.css 파일을 만들어서 App.js에서 import해서 쓴다고 해도 적은 클래스명들은 다른 컴포넌트까지 사용가능해진다.(오염)
  • 이것을 방지하기 위해 styled-components를 써도 되지만 그냥 CSS 파일에서 '모듈화' 기능을 사용
    => 컴포넌트명.module.css 이렇게 파일을 작명하고 컴포넌트 파일에서 import해서 쓰면 그 컴포넌트에서만 적용
• 페이지 로딩시간이 단축된다.
  • 저기 적은 스타일은 html 페이지의 <style> 태그에 넣어줘서 그럼

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

• ${ props => props.bg } 이게 styled-components에서의 props 문법
  • 자바스크립트 ` ` 백틱 따옴표 안에 적어도 문자를 만들 수 있는데 백틱으로 만든 문자 중간에 변수 같은걸 넣고 싶을 때 ${ 변수명 } 이렇게 쓸 수 있음
• bg 부분에 자유롭게 작명하면 되고 컴포넌트 쓸 때 bg라는 props를 입력 가능

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

• 이렇게 작성하여 만약 props로 받은 색상이 파란색이라면? 글자 색을 흰색 아니라면 검은색 과 같이 작성도 가능

단점

• JS 파일이 매우 복잡해짐
  • 이 컴포넌트가 styled인지 아니면 일반 컴포넌트인지부터 구분을 해야됨
• JS 파일간 중복 디자인이 많이 필요할 수도 있다.
  • 다른 파일에서 스타일 넣은 것들 import 해와서 써야되지만 이러면 그냥 CSS 파일 쓰는거랑 별 차이가 없음
• CSS 담당하는 디자이너가 있다면 협업시 불편할텐데 그 사람이 styled-compoents 문법을 모른다면 그 사람이 CSS로 짠걸 styled-components 문법으로 다시 바꾸거나 그런 작업이 필요하다.