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

특정 아이콘을 클릭해서 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>
  )
}