styled-components

styled components란?

styled components는 CSS in JS 라이브러리입니다. 컴포넌트에 CSS를 적용시킵니다. 이 라이브러리를 사용한 이유는 CSS를 따로 관리하는 것보다 JS안에 CSS가 있어 더 쉽게 컴포넌트 단위로 유지보수를 할 수 있기 때문입니다.

---

사용

styled-components 라이브러리를 설치합니다.

npm i -D styled-components

그 다음, 사용하고 싶은 js파일로 가서 import 합니다. 그리고 styled 키워드와 사용하고 싶은 html태그, 템플릿 리터럴을 사용합니다.

import styled from 'styled-components';

const Circle = styled.div`
  width: 5rem;
  height: 5rem;
  background: black;
  border-radius: 50%;
`;

---

플러그인

babel-plugin-styled-components

이 플러그인 디버그를 편하게 해줍니다. styled components로 생성한 컴포넌트는 class 이름을 해쉬해서 만듭니다. 그러나 디버그 시 어떤 컴포넌트인지 알아보기 힘듭니다. 그 때 이 플러그인을 이용하면 컴포넌트 이름을 해쉬 앞에 접두사로 붙여 어떤 컴포넌트인지 알 수 있게 해줍니다.

플러그인을 설치합니다.

npm i -D babel-plugin-styled-components

babel 설정파일에 플러그인을 추가합니다.

// babel.config.js
module.exports = {
  plugins: ['babel-plugin-styled-components'],
}