실패
//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 로 구별할 수 있게만 하면 간단하게 가능하다.