React - styled-component사용하기

• 컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생길 수 있다.
  ex) 1. class 만들어 놓은 걸 잊고 중복해서 또 만들 수 있다.
  2. 갑자기 다른 컴포넌트에 원하지 않은 스타일이 적용된다.
  (리액트 특성 상 모든 파일을 합쳐버리기 때문이다.)
  3. CSS 파일이 너무 길어져서 수정이 어려워진다.
  
  
  
• 그래서 styled-component 라는 라이브러리를 설치해서 이용하면 스타일을 바로 입혀서 컴포넌트를 만들 수가 있다.

🖤 styled-components 설치하기

• 터미널 열고 npm install styled-components 를 해준다.
• import styled from 'styled-components'
  사용하고싶은 컴포넌트 맨 위에 import 해준다.
• 지금은 Detail.js 파일 위에 import 하면 된다.

🖤 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. <di>를 만들고 싶을 땐 styled.div ,
   <p>를 만들고 싶을 땐 styled.p 이렇게 사용하면 된다.
2. 오른쪽에 `` backtick 기호를 이용해서 CSS 스타일을 넣어준다.
3. 변수에 저장하고 사용하면 된다.

🤍 styled-components 의 장점

1. CSS 파일을 오픈 할 필요없이 JS 파일에서 바로 스타일링을 넣을 수 있다.
2. 여기 적은 스타일이 다른 JS파일로 오염되지 않는다.
3. 페이지 로딩시간이 단축된다. (html페이지의 <style> 태그에 넣어주기 때문이다.)

🖤 일반 CSS 파일도 오염방지 가능

• App.css 파일을 만들어서 App.js 에서 import 를 쓴다고 해도 Detail.js 까지 사용이 가능하다. (오염!!)
• 프로젝트 사이즈가 커지면 관리하기 힘들어진다.

• 그럴땐 컴포넌트명.module.css 이렇게 쓰면 컴포넌트명.js 파일에 종속이 되서 그 파일에만 적용이 된다.

🤍 추가문법 : props로 재활용하기

• 여러가지 비슷한 UI 가 필요한 경우엔 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} 이렇게 적고 bg 부분에 자유롭게 작명을 하면 된다.
• 컴포넌트를 쓸 때 bg 라는 props를 입력 가능하게 만든다.

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

• 삼항연산자를 이용하여 background 가 blue 일 때 color 는 white 로, 아니면 black 으로 되게 만들 수 있다.

🤍 styled-components의 단점

1. JS 파일이 매우 복잡해진다. & 이 컴포넌트가 styled 인지 아니면 일반 컴포넌트인지 구분하기 어렵다.
2. JS 파일 간 중복 디자인이 많이 필요하다면 다른 파일에서 스타일 넣은 것들을 import 해와서 쓰면 된다.
   (하지만 이렇게 된다면 일반CSS파일 쓰는 것과 차이가 없게 된다. ㅎㅎ)
3. CSS를 담당하는 디자이너가 있다면 협업 시 불편할 수 있다.
   만약 디자이너가 styled-components 문법을 모른다면 다시 바꿔주는 작업을 해야한다.
   (그래서 신기술 도입 시에는 언제나 미래를 생각해보아야한다.)