Redux에서 브라우저의 제품 편집 페이지

지난 수업에서 우리는 제품 편집을 위한 양식을 만들었습니다. 이제 이 양식에 경로를 연결해 보겠습니다.

제품 애플리케이션을 열고, App.jsx 파일을 연 다음, children 속성의 배열에 자식 경로 객체를 하나 더 추가하세요 (EditProductForm를 임포트하는 것을 잊지 마세요):

{
	path: '/editProduct/:productId',
	element: <EditProductForm />,
},

또한 편집 양식으로 이동하기 위해 링크가 필요합니다. 이를 위해 ProductPage.jsx를 열고, 제품 수량에 관한 마지막 단락 뒤와 닫는 div 태그 전에 반환되는 마크업에 이 링크를 배치하세요:

<Link to={`/editProduct/${product.id}`} className="link-btn">
	edit
</Link>

또한 라우터 라이브러리에서 Link를 임포트하세요:

import { Link } from 'react-router-dom'

애플리케이션을 실행하고 어떤 제품의 보기 버튼을 클릭해 보세요. 편집을 시도한 후, 왼쪽 메뉴의 'Products' 링크를 클릭하여 제품 목록으로 돌아가 보세요. 또한 Redux DevTools에서 새로운 액션 productUpdated를 확인하고 store에서 제품 객체의 변경 사항을 볼 수 있습니다.

학생 애플리케이션을 열어 보세요. App.jsx 파일에서 학생 데이터 편집을 위한 자식 경로를 하나 더 추가하세요.

학생 페이지 마크업에 Link 요소를 추가하여 해당 학생 데이터 편집 페이지로 이동할 수 있도록 하세요.

애플리케이션을 실행하고, 어떤 학생의 데이터를 편집해 보세요. 편집 페이지에 있을 때 브라우저의 주소 표시줄을 주목하세요. 브라우저의 Redux DevTools에서 변경 사항을 확인하세요.