[ Project3 / actionBtn ] Server Side에서 액션을 취하려고 할 때(Feat. onClick)

Server Side를 열심히 고수하고 있다. 이유는 속도가 빠르다. 가장 일순이.

 

 

 

Situation

-서버에서 supabase를 가져와 delete 수행하기

 

Task

- Server Side로, supabase delete function를 시행할 것.

 

Action

주의 onClick

onClick =>. 'use client' // 클라이언트에서 오직 사용할 수 있음.

 

최초 방법 1. drop down으로 넘기기 => 안됨

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it. {}

최초 방법 2. 별도 componenet로 만들어서 client에서 부르기 => 안됨

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it. {}

선택 방법 3.  useFormState()

useFormState React 공식 설명

'use client';
import styles from '@/app/styles/Form.module.scss';
import { useFormState, useFormStatus } from 'react-dom';
import deleteReservationFn from '@/app/util/deleteReservationFn';

type CancelButtonProps = {
  bookingId: string;
};

const initialState ={
  message : ""
}

const DeleteButton = () => {
  const { pending } = useFormStatus()
  return(
    <button type='submit' aria-disabled={pending} className={styles.reservationCancelBtn} >
      {pending ? '예약 삭제중' : '예약 취소'}
    </button>
  )}

const CancelButton = ({ bookingId }: CancelButtonProps) => {
    const [ state, formAction ] = useFormState(deleteReservationFn, initialState)

    return (
      <form action={formAction} >
        <input type="hidden" name='bookingId' value={bookingId} />
        <DeleteButton />
      </form>
  );
};

export default CancelButton;

https://www.youtube.com/watch?v=dDpZfOQBMaU

useFormState 활용

 

Result

핵심은 action을 활용하여 server에서 '취소' 을 수행한다.

// deleteReservationFn. 를 통해서 서버쪽에서 supabase delete function을 수행

 

위에서 말했듯이 onClick은 'use client' 이기 때문에 사용할 수 없다. 특히 데이터를 server로 받아와서 뿌리고 싶을 때, 사용하기 쉽지 않다.

그래서 nested 방식을 사용해야 한다.

page.tsx : 'use server'
  ㄴ  DeleteButton.tsx : 'use client'
        ㄴ deleteReservationFn : 'use server' => useFormState를 통해 delete function 수행