[React] 드롭다운 구현

Yujin·2023년 2월 12일
0
post-thumbnail

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 컴포넌트는 보여지지 않는다.

0개의 댓글