useFetcher는 loader나 action이 속한 페이지를 로딩하지 않고 그것들을 실행하고 싶을 때 사용한다. 예를 들어 여러 페이지에서 사용되는 공통된 컴포넌트가 있을 때 뒷단에서 데이터를 받거나 업데이트하려 할 때 유용하다. const router = createBrowserRouter([ { path: '/', element: , errorElement: , children: [ { index: true, element: }, ... { path: 'newsletter', element: , action: newsletterAction, }, ], }, ]); 만약 라우트 설정이 위와 같고, NewsletterPage가 다음과 같을 때, NewsletterSignup이 제출되면 newslett..
Form import { Form } from 'react-router-dom'; return ( Title ) //... action 으로 백엔드에 요청을 전달하려면 기본 form 태그는 react-router-dom이 제공하는 Form 컴포넌트로 대체해야 한다. 이 Form은 브라우저가 백엔드로 요청을 보내는 기본값을 방지해주고, 대신 그 요청을 받아서 현재 활성인 라우트(현재 그 폼이 로딩된 라우트) action함수에 자동으로 전달한다. Form의 method 프로퍼티는 백엔드에 전송하는 요청의 method를 설정할 수 있게 한다. 이 method 프로퍼티는 action함수의 request객체에서 추출할 수 있다. 그리고 폼에서 데이터를 추출하기 위해 모든 input에 name 프로퍼티를 추가해야 ..
useEffect(() => { async function fetchEvents() { setIsLoading(true); const response = await fetch('http://localhost:8080/events'); if (!response.ok) { setError('Fetching events failed.'); } else { const resData = await response.json(); setFetchedEvents(resData.events); } setIsLoading(false); } fetchEvents(); }, []); 위 코드와 같이 useEffect 안에서 백엔드로부터 데이터를 받아올 수도 있고, 로딩 상태와 에러 메세지를 표시할 수 도 있다. 이렇게 작성한..
