MUI Menu anchorEl 사용 이유

프젝에 필요한 moremenu

 

Mui menu 를 가져와서 쓰는데 매우 머리가 아프다... mui는 커스텀을 하려면 뭐 하나를 건드리기가 쉽지 않고 연결되어있어 결국은 그 전체를 다 파악해야한다... (이거 뭐 쉽게 가려고 라이브러리쓰다가 결국 다 공부해야되는 마법)

 

anchorEl 이 자꾸 따라다니는데 한글 구글링이 없길래 슬쩍 남겨본다. 

 

mui menu 활용법은 다음 글에 파악해서 남겨놓을 예정...궁금한사람 있으면 좋아요공감꾸욱..

 

 

anchorEl은

• Material-UI의 Menu 컴포넌트에서 메뉴를 나타내는 버튼이나 아이콘과 연결된 엘리먼트를 가리키는 React state 변수.
• 메뉴가 어디에서 열리는지 정의하고, 열린 메뉴의 위치를 결정하는 데 도움

보통 Menu 컴포넌트의 anchorEl prop에 이 변수를 할당한다.

ex )

<Menu
  anchorEl={anchorEl}
  open={open}
  onClose={handleClose}
>
  {/* 메뉴 아이템들 */}
</Menu>

여기서 anchorEl은 메뉴가 열리는 위치를 결정하는 엘리먼트를 가르킨다. 메뉴가 이 엘리먼트 근처에서 열리며, Menu 컴포넌트는 이 엘리먼트의 위치를 기준으로 메뉴의 위치를 조절한다.

일반적으로 사용자가 버튼을 클릭했을 때, 메뉴가 그 버튼 근처에서 열리도록 하고, 이때 버튼의 엘리먼트를 anchorEl에 할당한다. 이후 메뉴를 닫거나 다른 위치에서 열리도록 할 때는 anchorEl을 null로 설정하여 메뉴가 아무 곳에서나 열리도록 한다.

 

const handleClick = (event) => {
  setAnchorEl(event.currentTarget);
};

const handleClose = () => {
  setAnchorEl(null);
};

위의 코드에서 handleClick 함수는 이벤트가 발생한 엘리먼트를 anchorEl에 할당하고, handleClose 함수는 anchorEl을 null로 설정하여 메뉴를 닫는다.

 

(이 글은 옵시디언을 통해서 발행되었습니다.)