[Router] useNavigation과 useSubmit

 

useNavigation과 useSubmit에 대해 알아보겠습니다.

 

 

[ useNavigation ]

useNavigation은 useNavigate와는 다릅니다.  헷갈리면 안 됩니다. :)

 

예를 들어, useNavigation은 어떤 폼을 작성해서 제출하는데 현재 진행 상황을 저장하는 것과 같을 경우 사용하기에 좋습니다. 

 

즉, 현재 폼에 대한 정보를 받을 수 있습니다. 

 

const navigation = useNavigation()
 
const isSubmitting = navigation.state === 'submitting'

 

폼 제출 시 true를 받는 상수를 선언 후 

 

<button disabled={isSubmitting}>
  {isSubmitting ? "Submitting..." : "Save"}
</button>

 

return에서 조건적으로 받아보면 폼이 제출 중일 때는 버튼이 Submitting...로 바뀝니다.

 

혹은 data를 넘기기 위해서 useNavigation을 이용할 수 있습니다. 

 

const navigation = useNavigation();
 
navigation(component명, {보내고 싶은 데이터 : 내용 }); 

 

[ useSubmit ]

 

useSubmit을 사용하여 양식 내에서 값이 변경될 떄마다 양식을 제출할 수 있습니다.

 

useSubmit({내가 제출하려는 데이터},{Form에 })

 

인자로 2개를 넣는데, 첫번째 인자에는 우리가 제출하려는 데이터를 넣고, 두 번째 인자에는 우리가 Form에 설정할 수 있는 것과 기본적으로 같은 값들을 설정할 수 있게 합니다.

 

예를 들어, method: delete, action: '/...' 과 같이 설정할 수 있습니다.

 

 const submit = useSubmit();
 
  function startDeleteHandler() {
    const proceed = window.confirm('Are you sure?'); 
 
    if (proceed) {
      submit(null, { method: 'delete'});
    }
  }

 

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');
}