카테고리

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() { ..

Tutorial v6.16.0 reactrouter.com 라우트 추가 라우트를 추가하기 위해 routes 폴더에 contact.jsx를 생성한다. contact.jsx의 내용은 다음과 같다. import { Form } from 'react-router-dom'; 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.first || contact.last ? ( {contact.firs..

Tutorial v6.16.0 reactrouter.com 라우터 생성 현재 src 폴더의 main.jsx 파일의 내용은 다음과 같다. import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App.jsx'; import './index.css'; ReactDOM.createRoot(document.getElementById('root')).render( ); main.jsx 파일의 내용을 다음과 같이 수정한다. import React from 'react'; import ReactDOM from 'react-dom/client'; import { RouterProvider, createBrowserRou..

Tutorial v6.16.0 reactrouter.com 프로젝트 생성 npm create vite@latest name-of-your-project -- --template react name-of-your-project에 본인이 명명하고 싶은 프로젝트 이름을 적어준다. 예시) npm create vite@latest react-router-tutorial -- --template react 프로젝트 생성이 완료되면 다음 명령어를 통해 프로젝트 폴더로 이동한다. cd 에 본인이 명명한 프로젝트 이름을 적어준다. 예시) cd react-router-tutorial 라이브러리 설치 npm install react-router-dom localforage match-sorter sort-by react-r..