React styled-components

일단 설치부터

터미널 열어서

npm install styled-components 하고

사용하고 싶은 컴포넌트 맨위에 이런거 import 해오면됨

import styled from 'styled-components'

---

기본적인 사용법

이 라이브러리를 이용하면 컴포넌트를 만들 때 스타일을 미리 주입해서 만들 수 있음

//예시
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>
  )
}

1. <div를 하나 만들고 싶으면 저렇게 styled.div 라는걸 사용하면 되고

2. 오른쪽에 backtick 기호를 이용해서 CSS 스타일을 넣을 수 있음

3. 그럼 그 자리에 컴포넌트를 남겨주는데 변수에 저장해서 쓰면 된다

장점1. CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일넣을 수 있음

장점2. 여기 적은 스타일이 다른 JS 파일로 오염되지 않음. 원래 그냥 CSS파일은 오염됨

장점3. 페이지 로딩시간 단축

---

추가문법: 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>
  )
}

${ props => props.bg } 이게 styled-components 에서의 props 뚫는 문법

bg부분에 자유롭게 작명하면되고

이제 컴포넌트 쓸 때 bg라는 props를 입력가능

---

근데 사실 단점도

• 단점1. JS 파일이 매우 복잡해짐

  그리고 이 컴포넌트가 styled 인지 아니면 일반 컴포넌트인지 구분도 어려움

• 단점2. JS 파일 간 중복 디자인이 많이 필요하면 우짬

  다른 파일에서 스타일 넣은 것들 import 해와서 쓰면 됨

  근데 그럼 CSS파일 쓰는거랑 차이가 없을 수도

• 단점3. CSS 담당하는 디자이너가 있다면 협업시 불편할텐데

  그 사람이 styled-components 문법을 모른다면

  그 사람이 CSS로 짠걸 styled-components 문법으로 다시 바꾸거나 그런 작업이 필요할듯