Redux의 폼과 로컬 상태

이전 수업들에서 우리는 store에서 데이터를 가져와 React 컴포넌트에 출력하는 방법을 배웠습니다. 이번 수업에서는 새로운 데이터를 추가하는 것을 시작하겠습니다. 우리는 판매자가 새로운 제품을 추가할 수 있는 폼을 작성하여 이를 수행할 것입니다.

항상 Redux의 전역 상태를 사용할 필요는 없다는 점부터 시작하겠습니다. 우리의 필요에 맞게 로컬 상태를 생성할 수 있는 경우가 있습니다. 로컬 상태란 특정 컴포넌트 내부에서 기술적인 목적으로 사용되는 상태를 말합니다. 예를 들어, 버튼을 통해 무언가를 숨기거나 표시하기 위해서입니다.

우리의 경우 사용자가 폼에 데이터를 입력할 것이고, 당연히 이를 위해 상태가 필요할 것입니다. 전역 Redux 상태를 사용할 수도 있지만, 우리의 상태가 제품 추가 폼을 위해 애플리케이션의 한 곳에서만 작동할 것이기 때문에 이는 의미가 없습니다. 이때 따라야 할 주요 규칙은 로컬 상태가 생성된 컴포넌트 외부에서 작동해서는 안 되며, 어떤 경우에도 store에 관여해서는 안 된다는 것입니다. 이러한 방식은 폼 생성 시 자주 사용됩니다.

제품이 있는 애플리케이션의 products 폴더를 열고, 그 안에 NewProductForm.jsx 파일을 생성한 후 useState 훅을 임포트해 보겠습니다:

import { useState } from 'react'

이제 폼과 함께 컴포넌트 자체를 생성하고 이전에 React에서 했던 것처럼 일반적인 상태를 작성하겠습니다. 제품의 이름, 설명, 가격 및 수량 작업을 위한 상태가 필요합니다:

export const NewProductForm = () => {
	const [name, setName] = useState('')
	const [desc, setDesc] = useState('')
	const [price, setPrice] = useState(0)
	const [amount, setAmount] = useState(0)
}

다음으로 사용자가 데이터를 입력할 때 각 필드에 대한 표준 처리를 추가하겠습니다:

const onNameChanged = (e) => setName(e.target.value)
const onDescChanged = (e) => setDesc(e.target.value)
const onPriceChanged = (e) => setPrice(e.target.value)
const onAmountChanged = (e) => setAmount(e.target.value)

그런 다음 컴포넌트에서 제목과 빈 폼이 있는 마크업을 반환하겠습니다:

return (
	<div>
		<h2>새 제품 추가</h2>
		<form>
		</form>
	</div>
)

학생 관련 애플리케이션을 열어주세요. students 폴더에 NewStudentForm.jsx 파일을 생성하세요. NewStudentForm 컴포넌트에 필요한 필드에 대한 로컬 상태를 만들고, 수업에서 보여준 것처럼 각 필드에 대한 처리 함수를 작성하세요.

NewStudentForm 컴포넌트에서 제목과 빈 폼을 포함하는 마크업을 반환하세요.