React Router에 데이터 추가하기

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

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

routes/root.jsxreturn (
  <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를 임포트합니다:

routes/root.jsximport { Form } from 'react-router-dom';

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

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

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