Styled Component

플릿 리터럴을 이용해 스타일 정보를 실제 CSS 코드를 사용하여 자바스크립트 파일 안에 스타일을 선언하는 CSS-in-JS 방식 중 하나입니다. (인라인 방식과는 다릅니다.) 컴포넌트와 스타일 간의 매핑을 제거하고 SASS나 LESS와 같은 전처리기가 제공하는 프로그래밍적 동작 방식도 제공합니다.

공식 문서

styled-components

사용 이유

자유로운 CSS 커스텀 컴포넌트를 만들 수 있습니다.

스타일이 구성요소의 필수 부분이 되어 스타일과 컴포넌트 간의 매핑을 제거하여 CSS 클래스가 처음 수행한 주요 부분을 제거

import styled from "styled-components";
const Subtitle = styled.h2`
  font-size: 2em;
  color: blue;
`;
<Subtitle>Gucci Snakes</Subtitle>;

인라인 스타일링

styled-components가 DOM위에 스타일 태그를 부착합니다.

import styled from 'styled-components';
const Text = styled.div`
color: red,
background: black
`
<Text>Styled with CSS-in-JS </Text>