![]()
Tutorial v6.16.0 reactrouter.com 현재 연락처들을 클릭하면 모두 동일한 페이지가 렌더링되고 있다. 이는 다음과 같이 컴포넌트에서 정적인 데이터를 이용해 렌더링하고 있기 때문이다. // ... export default function Contact() { const contact = { first: "Your", last: "Name", avatar: "https://placekitten.com/g/200/200", twitter: "your_handle", notes: "Some notes", favorite: true, }; return ( {/* ... */} ); } contact 라우트로 돌아가보자. { path: "contacts/:contactId", element:..
![]()
Tutorial v6.16.0 reactrouter.com HTML form vs React Router Form HTML의 은 GET이나 POST 요청을 서버로 전송한다. 반면 React Router의 은 요청을 서버로 전송하는 대신 클라이언트 측 라우팅을 사용하여 라우트의 action으로 전송한다. 현재 사이드바의 New 버튼을 클릭하면 서버에서 요청을 처리하지 않으므로 에러가 발생하는 것을 확인할 수 있다. 데이터 추가하기 새 연락처를 생성하기 위해 POST 요청을 서버로 전송하는 대신 클라이언트 측 라우팅을 사용해 보자. 먼저 src/routes/root.jsx에서 다음과 같이 action을 생성하고 을 으로 변경한다. import { Form, Link, Outlet, useLoaderData ..
![]()
Tutorial v6.16.0 reactrouter.com 데이터 가져오기 다음과 같이 라우트, 컴포넌트, 데이터는 서로 연관되어 있는 경우가 많다. 라우트 컴포넌트 데이터 / 연락처 리스트 contacts/:contactId 개별 연락처 그렇기 때문에 React Router는 라우트에 해당하는 컴포넌트에서 데이터를 쉽게 가져올 수 있도록 loader와 useLoaderData라는 API를 제공한다. 먼저 root.jsx에서 다음과 같이 loader 함수를 정의하고 export한다. import { Link, Outlet } from 'react-router-dom'; import { getContacts } from '../contacts'; export async function loader() { ..
