Redux에서 데이터 편집을 위한 양식

이제 store의 데이터를 변경하기 위한 리듀서가 있습니다. 이번 강의에서는 제품 데이터를 편집할 수 있는 양식을 만들겠습니다.

제품 애플리케이션을 열고 products 폴더에 파일 EditProductForm.jsx를 생성하세요. 컴포넌트 EditProductForm 생성은 NewProductForm와 유사하지만, 몇 가지 차이점이 있으며, 여기에 중점을 둘 것입니다. 따라서 NewProductForm.jsx의 코드 전체를 복사하여 생성한 파일 EditProductForm.jsx에 붙여넣으세요. 이제 순서대로 시작하겠습니다.

import에서 nanoid를 제거하세요, 여기서는 id를 생성할 필요가 없습니다. import productAdded를 productUpdated로 바꾸세요, 왜냐하면 여기서는 추가가 아닌 업데이트를 위한 action을 사용할 것이기 때문입니다.

다음으로, 컴포넌트 함수의 이름을 NewProductForm에서 EditProductForm로 변경하세요.

EditProductForm 함수 내에서 name, desc, price, amount에 대한 로컬 state를 설정하기 전에 몇 줄의 코드를 더 추가하겠습니다. 앞서 언급한 것처럼, 여기서는 id를 생성할 필요가 없습니다. 이제 우리의 임무는 편집할 제품의 데이터에서 id를 얻는 것입니다. 우리는 이미 제품 개별 페이지를 생성할 때 이렇게 했었습니다. 자, 훅 useParams를 사용하여 id를 얻고, 그런 다음 필요한 제품을 찾으세요, 훅 useSelector를 사용하여 (파일 시작 부분에 두 훅 모두 import하는 것을 잊지 마세요):

let params = useParams()
const { productId } = params

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

그 후 로컬 state 선언 블록을 변경하세요. 이제 초기값으로 store에서 얻은 제품 데이터를 설정해야 합니다. 첫 번째 state는 다음과 같이 보일 것입니다, 나머지 세 개도 직접 수정하세요:

const [name, setName] = useState(product.name)

useDispatch에 대한 변수를 할당한 후 이번에는 useNavigate 훅을 위해 한 줄의 코드를 더 추가하겠습니다. 사용자가 양식에서 변경한 내용을 저장할 때 제품 페이지로 돌아가기 위해 이 훅을 사용할 것입니다:

const navigate = useNavigate()

또한 파일 시작 부분에 이 훅을 import하세요:

import { useNavigate, useParams } from 'react-router-dom'

다음으로 입력 필드에 대한 핸들러가 있습니다. 그 후 onSaveProductClick 함수를 수정해야 합니다. 이제 클릭 시 얻은 id와 객체 형태의 변경된 데이터를 담은 액션 productUpdated를 전송할 것입니다. 그 후 편집된 제품 페이지로 이동하기 위해 navigate를 추가하세요:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productUpdated({
				id: productId,
				name,
				desc,
				price,
				amount,
			})
		);
		
		navigate(`/products/${productId}`);
	}
}

이제 반환되는 마크업에서 다음 줄을 찾기만 하면 됩니다:

<h2>새 제품 추가</h2>

그리고 이를 다음과 같이 바꾸세요:

<h2>제품 편집</h2>

학생 애플리케이션을 열어보세요. EditStudentForm.jsx 파일을 NewStudentForm.jsx와 유사하게 생성하세요. 강의에서 보여준 대로 변경 사항을 적용하세요.