styled-components

styled-components 라이브러리를 사용하면, 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수 있다.

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

• <div>를 하나 만들고 싶으면 저렇게 styled.div
  <p> 만들고 싶으면 styled.p
• 오른쪽에 백틱 기호 사용하여 css 스타일 넣을 수 있다.
• 변수에 저장해서 컴포넌트처럼 쓰면 됨.

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

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

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

styled-components: 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>
  )
}

styled-components 단점

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

• 단점2. CSS파일 쓰는거랑 차이가 없을 수도.

• 단점3. 팀원이 styled-components를 모르면 협업시 불편.

일반적인 CSS파일 오염 방지 기능

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

이럴 땐, 모듈화 기능을 사용!

컴포넌트명.module.css

따라서, App.module.css 라고 작명하면, App.js 파일에만 적용 된다.

---

음.. 저는 그냥 모듈화기능만 쓸듯ㅎ