Category.js
function Category() {
const [view, setView] = useState(false);
return (
<div
className="category"
onMouseEnter={() => setView(!view)}
onMouseLeave={() => setView(!view)}
>
...(중략)
{view && <HiddenCategory />} //view가 true면 HiddenCategory 컴포넌트 렌더링
</div>
);
}
Main.js에서는 Category 컴포넌트만 불러오고 Category 컴포넌트 내에서 useState를 이용하여 드롭다운을 구현했다.
Category 컴포넌트에서 HiddenCategory를 import한 후
마우스를 올리면 view가 true로 변해 HiddenCategory 컴포넌트가 보여지고,
마우스가 벗어나면 view는 false가 되어 HiddenCategory 컴포넌트는 보여지지 않는다.