[React.js] Styled-Components

react에서 css를 ..

할때 다양한 방법이 존재한다

1. css 파일 Import : 가장 기본, 규모가 커질수록 관리가 어렵고 헷갈림
2. Encapsulation : css에 해당하는 js 파일을 묶어 캡슐화한다. 코드의 가독성에 좋지않다
3. CSS Module : React에서 제공하는것으로 js파일명.module.css로 css파일을 네이밍하면 해당 js 파일에만 css가 적용되도록 해준다
4. Styled-Components : ..?

Styled-Components

CSS Module로 독립성을 챙겼지만..
CSS파일이 어쨌든 JS 파일과 분리되어 있다.

여전히 방대해질수록 관리가 힘들 것이란 단점이 존재하는 것이다.

개인적으로 필자는 Vue 사용에 더 익숙한데,
Vue는 Style scoped를 통해 한 파일 내에서 css 적용을 해당 파일에만 되도록 손쉽게 제한이 가능하다.

React라고 안될소냐? 그게 바로 Styled-Components이다!
react 또한 styled-components를 통해 해당 파일 내에서 스타일을 지정할 수 있다.

이것의 장점은 3가지정도 있는데
1. CSS 파일 오픈할 필요없이 JS파일에서 바로 스타일을 넣을 수 있다.
2. styled-components를 통해 작성한 css스타일은 다른 js파일로 전이되지 않는다.
3. 페이지 로딩 시간이 단축된다 : 저기 적은 스타일은 html 페이지의 style 태그에 넣어줘서 그럼(따로 css 파일을 불러올 필요 X)
4. js 문법 사용가능해진다, props를 통해 변수삽입, if문 작성 등의 js 문법 적용가능

Styled-Components 사용법

일단 설치부터

npm install styled-components

이후 사용할 js 파일에 import 해준다

import styled from "styled-components";

/* 선언 */
let BlackBox = styled.div`
  background: grey;
  padding: 20px;
`;

/* 사용 시 */
<BlackBox></BlackBox>

이후 이렇게 일반 컴포넌트처럼 사용해주면 된다.(컴포넌트니까 첫글자 대문자)

let YellowBtn = styled.button`
  background: ${(props) => props.bg};
  color: ${(props) => (props.bg == "blue" ? "white" : "black")};
  padding: 10px;
`;
  
<YellowBtn bg="blue">버튼</YellowBtn>

앞서 말했듯 props를 통해 변수삽입이 가능하며, 삼항연산같은 js문법 또한 활용 가능하다.

let copyYBtn = styled.button(YellowBtn)`
  margin-top: 10px
`;

다른 컴포넌트를 재활용 하고싶다면 저렇게 카피해서 커스텀 가능하다.

이 이외에도

let BlackBox = styled.div`
  background: grey;
  padding: 20px;
`;
  
<BlackBox as="button"></BlackBox>

as를 이용해 css의 속성변경이 가능하다.

styled-Components 무조건 써야되는 꿀 라이브러리네?

당연히 장점만 있는게 아니다.

1. JS 파일 자체가 복잡해짐 : JS 파일에 css를 같이 때려박기때문에 한 컴포넌트의 규모가 커지게 된다면 가독성 이슈
2. JS 파일 간 중복 디자인이 많이 필요하다면 ? 다른 파일에서 스타일 넣은거 import해와서 써야지, 근데 그러면 그게 css파일 쓰는거랑 뭔 차이일까
3. 협업 시 css전문 퍼블리셔가 있다면 ? styled-components에 js문법도 적용 가능하다 했는데 그럼 css 퍼블리싱 하시는분이 코드를 못 알아보는 협업 시 이슈 발생 가능성

그래서 나는

사실 본인의 경우엔 3번 이슈는 가까운 미래엔 없을 듯 하고
결국, 1번 2번의 단점을 고려하고서라도 장점들이 더 좋다 생각하기에 사용할듯한데(무엇보다 Vue의 Style scope방식에 익숙해져있음..)

한 컴포넌트의 단위, 또는 크기의 기준을 잘 선정하여 너무 커지지 않도록 분리한다면 단점이 상쇄가 되기에 컴포넌트 단위의 설계를 잘해주어야겠다.