매우 간단한 드롭다운 메뉴를 만들고 싶었다.
완료된 모습은 아래와 같음
Header.jsx
const [view, setView] = useState(false);
...(중략)
<ul onClick={() => {setView(!view)}}> -> ul 클릭하면 view 상태를 반대로
반가워요, nickname 님!{" "}
{view ? '⌃' : '⌄'} -> view가 true면 올리는 아이콘, false면 내리는 아이콘 보여줌
{view && <Dropdown />} -> view가 true일 때만 Dropdown 컴포넌트 렌더링
</ul>
Dropdown.jsx
function Dropdown() {
return (
<>
<li>마이페이지</li>
<li>로그아웃</li>
</>
);
}
export default Dropdown;