React Router에 데이터 추가하기

지난 강의에서 우리는 로더를 준비하고 저장소에서 특정 경로의 데이터를 불러오는 방법을 배웠습니다. 이제 우리 애플리케이션 예제를 통해 새로운 제품을 추가하고 그 데이터를 저장소에 기록하는 방법을 알아보겠습니다.

파일 root.jsx를 열고 nav 앞에 새 제품 추가 버튼을 폼 태그로 감싸서 레이아웃에 추가합니다. 또한 버튼과 목록을 #menu라는 id를 가진 또 다른 div로 감쌉니다. 이제 레이아웃은 다음과 같이 보일 것입니다:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">add product</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Unnamed</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>no products here ...</i>
			</p>
			)}
		</div>

		<div id="product">
			<Outlet />
		</div>
	</div>
);

만약 지금 개발자 도구의 '네트워크' 탭을 열고, 그런 다음 우리 버튼을 클릭하면, 서버로의 잘못된 문서 요청을 보게 될 것입니다. React Router를 사용하여 서버 요청을 제외하고 클라이언트 측 라우팅을 다시 활용하겠습니다.

이를 위해 form 태그를 React Router의 Form 컴포넌트로 바꿔봅시다. 먼저 Form를 임포트합니다:

import { Form } from 'react-router-dom';

이제 코드 조각에서 form 태그를 다음과 같이 변경합니다:

<Form method="post">
	<button type="submit">add product</button>
</Form>

우리 애플리케이션을 새로고침하고 개발자 도구를 다시 확인해보세요. 제품 추가 버튼을 클릭해보면 이제 서버로의 요청이 없습니다 (지금은 오류에 주의하지 마세요).

지난 강의 과제에서 생성한 애플리케이션을 가져오세요. 강의 자료를 이용하여 Root 함수의 마크업을 수정하고, form 태그 안에 학생 추가 버튼을 추가하세요. 버튼을 클릭했을 때 서버로 요청이 전송되는지 확인하세요.

이제 form 태그를 Form 컴포넌트로 교체하세요. 학생 추가 버튼을 클릭했을 때 서버로 요청이 전송되지 않는지 확인하세요.