햄버거 메뉴 만들기

실패

//styled-components
const Sidebar = styled.div<Props>`
  position: absolute;
  background-color: blue;
  z-index: 100;
  display: ${(props) => props.buggerMenu ? 'block' : 'none'};
`
  
//중략
  const [menuToggle, setMenuToggle] = useState(false);
  const menuOnOff = () => {
    setMenuToggle(menuToggle => !menuToggle);
  };

return(
	<Sidebar burgerMenu={
  !menuToggle ? 'burgurMenu' : 'noMenu'} />
  )

성공

//styled-components
const Sidebar = styled.div<Props>`
  position: absolute;
  background-color: blue;
  z-index: 100;
  display: ${(props) => props.toggle ? 'block' : 'none'};
`
//중략
  const [menuToggle, setMenuToggle] = useState(false);
  const menuOnOff = () => {
    setMenuToggle(menuToggle => !menuToggle);
  };

return(
	<Sidebar toggle={menuToggle} />
  )

props를 true / false 로 구별할 수 있게만 하면 간단하게 가능하다.