Using Modal component of Next.UI ( close , )

 Next.UI 의 modal 컴포넌트를 사용할때  몇가지 팁

1) 선택된 아이템의 값으로 모달에서 표시할 때 

•      모달을 띄우는 버튼 클릭 이벤트에서  useState에 변수를 선언하여 현재 선택된 데이터를 설정한다.

    //  바로 이벤트를 매핑 하는 경우 클릭 된 값을 설정하거나 전달  할 수 없으므로, 

<Button onPress={clickDelete} >선택 </Button>

  // 바로 이벤트를 매핑하지 말고 { }  현재 설정값 을 state에 설정하고  모달을 띄우고 설정된 값을 참조하도록 한다 호출을 하는 방식을 아래와 같이 바꿔본다.

//   event={eventFunc}     ---> event={    ( ) =>{ eventFunc(parameter) } }

const [selectedData, setSelectedData] = useState<MyItem>();

const clickButton = (item: MyItem) => {

console.log(item)

setSelectedData(item)

onOpen() // modal 열기

}

//----------------------------------------------------

<Button onPress={()=>{clickButton(item)}} />

// Modal 내에서, item의 속성을 표시한다

{item.title}

2) 모달에서 데이터를 처리하고 모달을 닫을 때, 모달내 button 에 이벤트를 연결하고 호출

<Button color="primary" variant="ghost" onPress={onProcess}>닫기</Button>

//--------------------------------------------

const onProcess = () => {

someCustomProcess() // some custom process you needed

onOpenChange() // modal close

}