[React] Styled-Components 알아보기

Styled-Components의 개념과 장단점

Styled-Components는 React에서 사용되는 대표적인 CSS-in-JS 라이브러리이다.

Styled-Components를 사용하면 CDD(Component Driven Development)를 할 수 있다.

CDD (Component Driven Development) 란?

컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스(UI) 구축에 도달하는 개발 및 설계 방법론. 기본적인 컴포넌트 단위부터 시작하여 UI 뷰(view)를 구성하기 위해 점진적으로 결합(조립)해가는 상향적(bottom-up) 성향을 띈다.

출처: https://yamoo9.github.io/react-master/lecture/sb-cdd.html

CSS-in-JS란 무엇일까?

이름에서 추측할 수 있듯이, JS 안에서 CSS를 작성할 수 있게 해주는 방식.

따라서 Styled-Components를 사용한다면,

1. CSS를 컴포넌트화 할 수 있음.
2. CSS와 JS 간의 상호작용이 쉬워짐. (props의 사용)
3. class 작명을 자동으로 해주기 때문에 귀찮음을 덜어줌.

이런 장점을 가져갈 수 있다.

반면에 다음과 같은 단점도 존재한다.

1. JS의 크기가 커지고 파일이 복잡해진다.
2. class 작명이 무작위로 이루어지기 때문에 보기에 좋지 않고 class 이름을 통한 역추적이 어렵다.
3. 같은 디자인의 재사용이 많이 필요할 경우, CSS파일을 쓰는 것과 큰 차이가 없어진다.

Styled-Components 기본 사용법

npm i styled-components

import styled from 'styled-components';

//변수명을 지어주고, styled.css 적용할 요소명 `css 내용`

const BlueButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
`;

function App() {
  return (
    <>
      <div>hello</div>
    //변수명 가져와서 써주면 된다.
      <BlueButton>파란색 버튼</BlueButton>
    </>
  );
}

export default App;