[코딩애플] 쇼핑몰 프로젝트 Part3 - Styled Components

✏️ styled-components 

✏️ 설치
- 터미널 열어서 npm install styled-components
- 그리고 사용하고 싶은 컴포넌트 맨위에 아래처럼 import

import styled from 'styled-components'

✏️ styled-components 기본적인 사용법
- 이 라이브러리를 이용하면 컴포넌트를 만들 때 스타일을 미리 주입해서 만들 수 있다.

// padding : 20px인 div박스

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 라는 걸 사용하면 된다. <p> 만들려면 styled.p 이런 식
2. 오른쪽에 `` backtick 기호를 이용해서 CSS 스타일을 넣을 수 있다.
3. 그럼 그 자리에 컴포넌트를 남겨주는데 변수에 저장해서 쓰면 된다.

✏️ 장점
장점1. CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일넣을 수 있다.
장점2. 여기 적은 스타일이 다른 JS 파일로 오염되지 않는다. 원래 그냥 CSS파일은 오염된다.
장점3. 저기 적은 스타일은 html 페이지의 <style> 태그에 넣어줘서 페이지 로딩시간이 단축된다.

! 실은 일반 CSS 파일도 오염방지 가능
- App.css 파일을 만들어서 App.js에서 import해서 쓴다고 해도 거기 적은 클래스명들은 Detail.js까지 사용 가능하다(오염되는 거). 프로젝트 사이즈가 작을 땐 편리하겠지만 사이즈가 커지면 관리하기 힘들어짐.
- 그럴 땐 styled-components 써도 되지만 그냥 CSS파일에서도 다른 JS 파일에 간섭하지 않는 '모듈화' 기능을 제공하는데 “컴포넌트명.module.css” 이렇게 CSS 파일을 작명하면 된다.
- 그리고 컴포넌트명.js 파일에서 import 해서 쓰면 그 스타일들은 컴포넌트명.js 파일에만 적용됨.

! 추가 문법: props로 재활용 가능

import styled from 'styled-components';

let YellowBtn = styled.button`
  background : ${ props => props.bg };  // styled-components 에서의 props 뚫는 문법
  color : black;
  padding : 10px;
`;

function Detail(){
  return (
    <div>
        <YellowBtn bg="orange">오렌지색 버튼임</YellowBtn>
        <YellowBtn bg="blue">파란색 버튼임</YellowBtn>
    </div>
  )
}

- bg 부분에 자유롭게 작명하면 되고 이제 컴포넌트 쓸 때 bg라는 props 입력 가능

✏️ 단점
단점1. JS 파일이 매우 복잡해진다.
단점2. JS 파일 간 중복 디자인이 많이 필요한 경우 다른 파일에서 스타일 넣은 것들을 import 해와서 사용하면 되는데 그럼 CSS 파일을 쓰는 것과 차이가 없다.
단점3. CSS 담당하는 디자이너가 있다면 협업시 불편하다.

---

본 포스팅은 << React 리액트 기초부터 쇼핑몰 프로젝트까지! >> 강의를 참고합니다.