Styled Components - 1

• Styled Components는 CSS in JS 라는 개념이 대두되면서 나온 라이브러리

• CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있다.

• 설치
  -> npm 으로 install

npm install --save styled-components

-> package.json에 다음의 코드를 추가하면 여러버전의 styled-components가 설치되는 것을 방지

{
  "resolutions": {
    "styled-components": "^5"
  }
}

-> js파일에 import

import styled from "styled-components"

• 사용 방법

import styled from "styled-components";

//Styled Components로 컴포넌트를 만들고
const BlueButton = styled.button`
  background-color: blue;
  color: white;
`;

export default function App() {
  // React 컴포넌트를 사용하듯이 사용하면 됩니다.
  return <BlueButton>Blue Button</BlueButton>;
}