카테고리 없음

[react] 이벤트 핸들러에 대한 잘못된 나의 생각.!

ehddkDEV 2024. 12. 27. 10:09

특정 아이콘을 클릭해서 dialog가 뜨게 하려고 했어서 onClick으로 이벤트를 줘서 

거기에 dialog 컴포넌트를 호출하게 하면 되겠다! 했던 나의 잘못된 생각...

 

일단 동작부터도 안되는 이슈!

 const handleDialog = () => {
    return(
     <Dialog
        visible={visible}
        size={"small"}
        title="신청하기"
        description="블라블라"
        onPositive={() => {
          setVisible(false);
        }}
      ></Dialog>
	)
  };

 

이벤트 핸들러는

사용자의 상호작용에 반응하여 어떤 "동작"을 수행하기 위한 것이다. 

React 컴포넌트는 UI를 정의하는 것이지, 이벤트 핸들러의 반환값으로 사용되어서는 안 된다!

즉, dialog 혹은 modal 같은 경우 상태로 관리해서 조건부 렌더링으로 설정해줘야 하는 것이다..

 

const App(){
	const [visible,setVisible]=React.useState(false); //상태 관리
    
    const handleDialog=()=>{
     setVisible(true); //Dialog를 보여주기 위해 상태만 변경
    }
    
    return(
    <Menu
      items={[
      {
       text: "신청",
       showArrow: true,
       onClick: handleDialog,
       },
      ]}/>
     <Dialog
        visible={visible}
        size={"small"}
        title="신청하기"
        description="블라블라~"
        onPositive={() => {
          setVisible(false);
        }}
     ></Dialog>
  )
}