styled-components 사용해보기

1. npm install

npm install styled-components

2. import

import styled from 'styled-components

3. styled-components 기본적인 사용법

styled-components를 이용하면 컴포넌트를 만들 때 스타일은 미리 주입해서 만들 수 있음.

예시로 padding:20px인 div박스를 styled-components를 이용해 만들어보겠음.

Sample code

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

✔️ sytled-components의 장점

장점1. css파일을 오픈할 필요 없이 js파일에서 바로 스타일링을 해줄 수 있음
장점2. 다른 js파일에 오염을 주지 않음. 그냥 css파일은 오염됨
→ react는 spa라 하나의 html, css로 합치게 되는데 이때 오염이 발생할 수 있음
장점3. 페이지 로딩 단축
→ 여기 적은 스타일은 html페이지의 <style>태그에 넣어줘서 그럼
→ 또 필요한 css만 가져올 수 있으므로 로딩시간 단축 가능

✨ 오염 방지 가능한 일반 CSS파일 만들기

App.css파일을 만들어서 App.js에서 import해서 쓴다고해도 여기 적은 클래스명들은 Detail.js까지 사용 가능함(오염)

그럴땐 style-components를 써도 되지만 그냥 CSS파일에서도 다르 JS파일에 간섭하지 않는 '모듈화'기능을 제공하는데
컴포넌트명.module.css
css파일을 만들때 이렇게 작명하면 되겠다 .

그리고 컴포넌트명.js파일에서 import해서 쓰면 그 스타일들은 컴포넌트명.js파일에만 적용이 됨.

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

여러가지 비슷한 UI가 필요한 경우가 있음

예를 들어 지금 노란 버튼이 아닌 오렌지색 버튼이 필요할 경우.

여기도 props문법을 지원함

Sample code

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; 
`; 

이런식으로 간단한 프로그래밍도 가능

✔️ sytled-components의 단점

단점1. js파일이 복잡해짐
→ 이 컴포넌트가 styled 컴포넌트인지 일반 컴포넌트인지 구분도 어려움
단점2. js파일 간 중복 디자인이 발생하면?
→ 다른 파일에서 스타일 넣은 것들을 import해와서 쓰면 되는데 이럼 그냥 일반 CSS파일을 쓰는거랑 차이가 없음.