0503: styled-components 공부

1. css in js (styled-components) - 반응형

www.youtube.com/watch?v=s-_8wRbuPSM&list=WL&index=5

styled-components를 통해 반응형 네비게이션바를 만들 예정.

npx create-react-app 
yarn add styeld-components

web

mobile-1

mobile-2(width: 100%;를 줬을 때)

768 미만일 때, 
width: 100%; 로 해야 원하는 모습이 됨

const Menu = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

  @media (max-width: 768px) {
    overflow: hidden;
    flex-direction: column;
    width: 100%;
    max-height: ${({ isOpen }) => (isOpen ? '300px' : 0)};
    transition: max-height 0.3s ease-in;
  }
`;

그리고 Menu가 받아온 isOpen의 상태에 따라서 높이를 다르게 그리는 코드.
그 isOpen의 상태는 햄버거버튼이 결정한다!
인라인이벤트로 설정해놨음.

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Nav>
      <Logo href="/">HOME</Logo>
      <Hamburger onClick={() => setIsOpen(!isOpen)}>
        <span />
        <span />
        <span />
      </Hamburger>
      <Menu isOpen={isOpen}>
        <MenuLink href="/">Work</MenuLink>
        <MenuLink href="/">About</MenuLink>
        <MenuLink href="/">Careers</MenuLink>
        <MenuLink href="/">Contact</MenuLink>
      </Menu>
    </Nav>
  );
};

간단한 코드지만, 이런 방식으로 css in js를 설정할 수 있다.