[React] - styled-components

npm install 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. CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일넣을 수 있습니다.

장점2. 여기 적은 스타일이 다른 JS 파일로 오염되지 않습니다.

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

 

단점1. JS 파일이 매우 복잡해집니다.

그리고 이 컴포넌트가 styled 인지 아니면 일반 컴포넌트인지 구분도 어렵습니다.

 

단점2. JS 파일 간 중복 디자인이 많이 필요하면 어쩌죠?

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

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

 

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

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

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

 

---

 

그냥 CSS파일에서도 다른 JS 파일에 간섭하지 않는 '모듈화' 기능을 제공하는데

컴포넌트명.module.css

이렇게 CSS 파일을 작명하면 됩니다.

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