Redux에서 폼 수정하기

이번 강의에서는 제품 추가 폼에 판매자 정보를 표시하는 작업을 마무리하겠습니다. 이를 위해 폼의 마크업을 약간 수정하기만 하면 됩니다.

제품 애플리케이션을 열고, 그 안에 있는 NewProductForm.jsx 파일을 열어 보겠습니다. return 명령 앞에 판매자를 선택할 드롭다운 목록의 마크업 코드 조각을 추가해 봅시다. map을 사용한 표준 방법으로 구현하겠습니다:

const sellersList = sellers.map((seller) => (
	<option key={seller.id} value={seller.id}>
		{seller.name}
	</option>
))

이제 실제 마크업을 수정해 보겠습니다. 폼 안의 첫 번째와 두 번째 단락(제품 이름과 설명을 위한 마크업 블록 사이)에 다음 마크업이 포함된 단락을 삽입합니다:

<p>
	<label htmlFor="prodSeller">판매자:</label>
	<select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
		<option value=""></option>
		{sellersList}
	</select>
</p>

이제 애플리케이션을 실행할 수 있습니다. 추가 폼에 판매자 목록이 나타납니다. 데이터로 폼을 채우고, 그 중 한 명을 선택하고, 저장 버튼을 클릭해 보세요. 이제 Redux DevTools를 살펴보면 변경 사항을 확인할 수 있습니다. 새로 추가된 제품에 선택한 판매자의 id를 값으로 하는 seller 속성이 나타났습니다. 또한 State 탭에는 이제 products와 sellers 두 개의 슬라이스가 표시됩니다.

학생 애플리케이션을 열어 보세요. NewStudentForm.jsx 파일에서 map을 사용하여 강사들의 이름이 포함된 teachersList 드롭다운 목록을 수업에서 보여준 대로 생성하세요.

강사들이 있는 드롭다운 목록을 표시하는 블록을 하나 더 추가하여 마크업을 수정하세요.

애플리케이션을 실행하세요. 학생 추가 폼에 이전 작업에서 만든 강사들이 포함된 드롭다운 목록이 나타나야 합니다.