카테고리 없음
[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>
)
}