2.1 Our First Styled Component

[WONILLISM]

styled components를 사용하면 return값에 html 태그들을 늘어트리는 코드를 더 깔끔하게해줄 수 있다.

  ...
  return (
    <div style={{ display: "flex" }}>
        <div style={{backgroundColor: "teal", width: 100, height: 100}}></div>
        <div style={{backgroundColor: "tomato", width: 100, height: 100}}></div>
    </div>
  );

  ...

import styled from 'styled-components';

const Father = styled.div`
  display: flex;
`;

const BoxOne = styled.div`
  background-color: teal;
  width: 100px;
  height: 100px;
`;

const BoxTwo = styled.div`
  background-color: tomato;
  width: 100px;
  height: 100px;
`;

function App() {
  return (
    <Father>
      <BoxOne></BoxOne>
      <BoxTwo></BoxTwo>
    </Father>
  );
}

위와 같이 CSS를 component처럼 쓸 수 있다.