loader(); 와 action();

loader();
-서버에 요청없이 클라이언트 사이드에서 데이터를 가져올 수 있다.
-컴포넌트가 랜더링되기 전에 데이터를 불러와준다.
-연관된 파일에 loader함수를 만들고 export해준다.
useLoaderData()로 컴포넌트에서 데이터를 받을 수 있다.
-loader를 사용한 컴포넌트보다 상위 컴포넌트에서는 사용할 수 없다.

useRouteLoaderData() : 라우터 설정의 'loader'함수에서 로드한 데이터에 접근 .예) app.js에서 분기한 element에서 동일한 loader함수를 사용하려고 할 때
useLoaderData() : 페이지 컴포넌트 내에서 loader함수의 리턴값을 받아서 사용하려고 할때 컴포넌트 내에 적어주는 것.

action()
1. 라우터에서 Form을 처리하기 위한 Form을 사용하는데 함께 이는 클라이언트 측에 요청을 보내는 것이다.
2. 클라이언트 측에서 요청을 받으면 이를 처리하는 것이 action()이다. Post 등 서버에 요청을 보낸다.

export async function action({ request, params }) {
  const data = await request.formData();

  const eventData = {
    title: data.get("title"),
    image: data.get("image"),
    date: data.get("date"),
    description: data.get("description"),
  };

  const response = await fetch("http://localhost:8080/events", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(eventData),
  });

  if (!response.ok) {
    throw json({ message: "Could not save event" }, { status: 500 });
  }

  return redirect('/events');
}


//action({request,param}) 
//매개변수로 여기서 param은 쓰이지는 않았지만 request가 request.formData()로 쓰였는데. 
//action 함수에 전달된 데이터를 받을 수 있게 해준다. 

useSubmit()
useSubmit을 사용하면 자동으로 Form이 wrapping되어서 삭제 요청시 유용하다.

import classes from './EventItem.module.css';
import {Link, useSubmit} from 'react-router-dom';

function EventItem({ event }) {
  const submit = useSubmit(); 

  function startDeleteHandler() {
    const proceed =window.confirm ('Are you sure?');

    if(proceed) {
      //이벤트를 삭제하는 액션 추가 
      submit(null,{method:'delete'});
    }
  }

  return (
    <article className={classes.event}>
      <img src={event.image} alt={event.title} />
      <h1>{event.title}</h1>
      <time>{event.date}</time>
      <p>{event.description}</p>
      <menu className={classes.actions}>
        <Link to="edit">Edit</Link>
        <button onClick={startDeleteHandler}>Delete</button>
      </menu>
    </article>
  );
}

export default EventItem;

//삭제하기 위한 액션

export async function action({ params, request }) {
  const eventId = params.eventId;
  const response = await fetch("http://localhost:8080/events/" + eventId, {
    method:request.method,
  });

  if (!response.ok) {
    throw json({ message: "Could not delete event" }, { status: 500 });
  }
  return redirect('/events');