React Styled Components

Styled Component란?

• styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다.

CSS-in-Js란?

• 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식이다.
• CSS-in-JS 방식을 사용하기위해 2가지 절차가 필요하다

1. VScode 플러그인 설치

• styled-components를 이용해서 코드를 작성할때 편리한 밑의 이미지와 같은 플러그인을 설치하자
  

2. yarn으로 styled-components 설치하기

• VScode 터미널에 다음과같이 입력하고 패키지를 추가하자

yarn add styled-components

Styled Component 기본문법

1. 컴포넌트 이름은 대문자로 시작한다.
2. styled 뒤에 사용해야 할 HTML 태그명 입력한다.
3. 백틱(``)으로 감싸서 스타일시트 작성한다.

• styled-comComponent는 내부적으로 props를 받을 수 있고, 그에 따라 props에 스타일을 전달할 수 있다.
  <문법 예시>

import styled from 'styled-componets'

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

const Title = styled.h1`
  font-size: 10px;
  text-align: center;
  color: red;
`;

const Wrapper = styled.section`
  padding: 5px;
  background: green;
`;