Styled Components - 2

• Styled Components 문법

1. 컴포넌트 만들기
   Styled Components는 ES6의 Templete Literals 문법을 사용합니다. 즉, 따옴표가 아닌 백틱(`)을 사용

const 컴포넌트이름 = styled.태그종류`
  CSS 속성1: 속성값;
  CSS 속성2: 속성값;
`;

export default function App() {
  // React 컴포넌트를 사용하듯이 사용하면 됩니다.
  return <컴포넌트이름> 이름을_쉽게_짓자 </컴포넌트이름>;
}

2. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기

//만들어진 컴포넌트를 재활용해 컴포넌트를 만들 수 있습니다.
const 재활용컴포넌트이름 = styled(컴포넌트이름)`
  추가할 CSS 속성1: 속성값;
  추가할 CSS 속성2: 속성값;
`;

//재활용한 컴포넌트를 재활용할 수도 있습니다.
const 재활용을재활용_이름 = styled(재활용컴포넌트이름)`
  추가할 CSS 속성1: 속성값;
  (원래 있던)CSS 속성: 다른 속성값;  <- 설정된 값을 바꾸는 것도 가능!
`;

export default function App() {
  return (
    <>
      <컴포넌트이름>호잇</컴포넌트이름>
      <br />
      <재활용컴포넌트이름>옴메</재활용컴포넌트이름>
      <br />
      <재활용을재활용_이름>ㅋㅋㅋㅋㅋㅋ</재활용을재활용_이름>
    </>
  );
}