Styled Component 란?

CSS-in-js

• CSS파일 없이 자바스크립트에서 CSS 작업을 할 수 있도록 해주는 라이브러리.
• 컴포넌트로 style 작업 시 class name의 중복을 신경쓰지 않아도 된다.
• 컴포넌트 구조와 style을 한눈에 볼 수 있다.
• 2018년 이후 폭발적으로 성장하여, npm 다운로드 수 기준 가장 있기있는 css-in-js 라이브러리!!

Styled Component 적용

공식 문서 예시

import styled from 'styled-components

render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

• 먼저 Styled-Components를 설치 해준다.
  npm install --save styled-components

• styled-components를 import 시켜준다.
  -. 코드의 가독성을 위해 리액트 컴포넌트를 먼저 선언해준다.

• const Wrapper = styled.section``;
  -. 대문자 시작으로 스타일드 컴포넌트를 선언한다.
  -. styled.(태그)후 Templete Literals 문법으로 css를 작성해준다.

React 또는 React Native와 함께 사용할 시, 좋은 성능을 보여주기 때문에 앞으로 React 와 함께 사용하며 포스팅 하려고 한다.