Styled Component란?
- styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다.
CSS-in-Js란?
- 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식이다.
- CSS-in-JS 방식을 사용하기위해 2가지 절차가 필요하다
- VScode 플러그인 설치
- styled-components를 이용해서 코드를 작성할때 편리한 밑의 이미지와 같은 플러그인을 설치하자

- yarn으로 styled-components 설치하기
- VScode 터미널에 다음과같이 입력하고 패키지를 추가하자
yarn add styled-components
Styled Component 기본문법
- 컴포넌트 이름은 대문자로 시작한다.
- styled 뒤에 사용해야 할 HTML 태그명 입력한다.
- 백틱(``)으로 감싸서 스타일시트 작성한다.
- 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;
`;