[css] styled-components

goal

• styled-components로 css 구성하기

styled-components 라이브러리

• 효용 : 스타일을 입히는 것 + 동시에 + 해당 스타일을 가진 컴포넌트를 만들 수 있다.
  ex) div 스타일링 : styled.div
  ex) input 스타일링 : styled.input

import logo from './logo.svg';
import RecentWorks from "./components/RecentWorks"
import './App.css';

import React from 'react';
import styled, {css} from 'styled-components';
import Button from "./components/Button";



const Circle = styled.div`
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: ${props => props.color || 'black'};

  /* 여러 줄의 CSS 코드를 조건부로 보여주고 싶다면 css 를 사용해야 한다. */
  /* css 를 불러와서 사용을 해야 그 스타일 내부에서도 다른 props 를 조회 할 수 있다. */
  ${props => props.huge && css`
  width : 10rem;
  height : 10rem;
  `}
`;

const AppBlock = styled.div`
  width : 512px;
  margin : 0 auto;
  margin-top : 4rem;
  border : 1px solid black;
  padding : 1rem;
`

function App() {
  return (
    <>
    <Circle color="pink" huge/>
    {/* // props 값을 바로 줄 수 있다. */}
    {/* // Circle 컴포넌트에서는 color props 값을 설정해줬으면, 해당 값을 배경색으로 설정한다. 하지만, 그러지 않으면 black을 배경색으로 사용 */}
    <AppBlock>
      <Button>버튼</Button>
    </AppBlock>
    </>
  )

}

export default App;