Redux에 양식 추가하기

지난 수업에서 우리는 양식의 입력 필드에 단일 컴포넌트 내에서만 작동하는 스테이트를 적용할 수 있다는 것을 배웠고, 빈 양식을 만들었습니다.

form 태그 안에 정보가 입력될 각 필드에 대한 마크업을 배치해 봅시다. 첫 번째 입력은 제품 이름을 담당하며 그 마크업은 다음과 같습니다:

<form>
	<p>
		<label htmlFor="productName">이름:</label>
		<input
			id="productName"
			name="productName"
			value={name}
			onChange={onNameChanged}
		/>
	</p>
</form>

두 번째는 제품 설명을 위한 textarea입니다:

<p>
	<label htmlFor="productDesc">설명:</label>
	<textarea
		id="productDesc"
		name="productDesc"
		value={desc}
		onChange={onDescChanged}
	/>
</p>

productPrice와 productAmount라는 아이디를 가진 남은 두 개의 입력 필드에 대한 코드를 직접 작성해 보세요.

네 개의 입력 필드 모두 뒤, form 닫는 태그 앞에 저장 버튼을 추가하세요:

<button type="button">저장</button>

우리의 양식 컴포넌트가 준비되었습니다. 메인 페이지에 표시해 봅시다. 이를 위해 root.jsx 파일을 열고, 컴포넌트를 임포트하세요:

import { NewProductForm } from '../parts/products/NewProductForm'

그리고 hr 태그와 ProductsList 컴포넌트 사이에 다음과 같이 삽입하세요:

<hr></hr>
<NewProductForm />
<ProductsList />

우리의 애플리케이션을 실행하고 양식과 제품 목록을 확인해 봅시다. index.css에 스타일을 더 추가하겠습니다:

#main-page {
	max-width: 600px;
}

select,
textarea,
input,
button {
	font-size: 18px;
}

form {
	margin-bottom: 20px;
	border-bottom: 2px solid lightgray;
	padding-bottom: 10px;
}

form p {
	margin: 5px;
}

학생 관리 애플리케이션을 열고 수업에서 보여준 것처럼 양식의 마크업을 만드세요.

완성된 NewStudentForm 컴포넌트를 메인 페이지의 StudentsList 앞에 추가하세요.