그럼에도 불구하고

useNavigation과 useSubmit에 대해 알아보겠습니다. [ useNavigation ] useNavigation은 useNavigate와는 다릅니다. 헷갈리면 안 됩니다. :) 예를 들어, useNavigation은 어떤 폼을 작성해서 제출하는데 현재 진행 상황을 저장하는 것과 같을 경우 사용하기에 좋습니다. 즉, 현재 폼에 대한 정보를 받을 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 폼 제출 시 true를 받는 상수를 선언 후 HTML 삽입 미리보기할 수 없는 소스 return에서 조건적으로 받아보면 폼이 제출 중일 때는 버튼이 Submitting...로 바뀝니다. 혹은 data를 넘기기 위해서 useNavigation을 이용할 수 있습니다. HTML 삽입 미리보기할 수 없는 소..

action과 Form, useActionData 그리고 redirect에 대해 알아보겠습니다. [ action ] react router dom에서 action을 배울 때 주목해야 할 부분은 HTML form입니다. HTML form은 특정 url에 데이터를 전송해서 처리하는 요청 과정입니다. 그리고 그 요청을 처리할 주소 값은 보통 action에 정의합니다. 클라이언트 사이드에서 form을 처리하기 위해 리액트 라우터는 Form이라는 것을 사용합니다. 그리고 이는 html form을 모방하여 클라이언트 측에다가 request를 보냅니다. // html 폼 // react router의 폼. 클라이언트 사이드에서 처리합니다. 즉 을 사용하면 서버에다가 request를 보내는 것이고, 을 사용하면 클라이..

오늘은 loader 함수의 error 처리에 대해 알아보겠습니다. 현재 "events" path를 가진 페이지에서 사용되는 loader는 다음과 같습니다. loader 함수에서는 에러가 발생하면 JSON 형태의 error message와 status 500 상태를 전송하고 있습니다. events path에서 발생한 오류는 상위 컴포넌트(라우트)인 ErrorPage에서 다루고 있습니다. ErrorPage에서는 loader로 인해 발생한 error뿐만 아니라 page 전체에서 발생한 에러를 모두 다루고 있습니다. 여기서 useRouteError 기능을 사용하면 loader에서 throw new Response로 발생시킨 error data를 받아올 수 있습니다. 또한 발생한 error의 status에 따라 ..